Site Engager: Recommend content on your website

Jan Griffiths

Last Updated: June 11, 2024 17:33

With Site Engager, you can recommend content from your Uberflip Hub on any of your other web properties. This article will show you how.

Before You Begin

To use Site Engager, you need to be an Account Admin.
You will need access to the website code (HTML) of the web property on which you want to use Site Engager.
If you want Site Engager to use the Uberflip recommendation engine to generate content suggestions, you must set up a Bombora integration on your Hub. For instructions, see Set Up a Bombora Integration.
The recommendation engine is only available on certain pack types. If your pack type does not include it, you'll still be able to use Site Engager, but won't be able to select the engine as a recommendation option. For more information about your pack type and what's included, please contact your Customer Success Manager, or Uberflip Support.

About Site Engager

Serving up personalized content recommendations to your visitors is an effective way of increasing their engagement. Uberflip's Content Recommendations feature takes care of serving up recommendations in your Hub, but what about prospects that haven't made it to your Hub yet?

Site Engager goes hand-in-hand with Content Recommendations, and recommends content from your Hub on any of your other web properties. Like Content Recommendations, Site Engager uses Uberflip's recommendation engine to customize recommendations to your visitors' needs and interests, maximizing their relevance and value.

Where Are Recommendations Shown?

Site Engager displays recommendations in two main ways. The first of these is the Promo Tile, which appears along the left or right side of a webpage:

Optimize_Your_Content_Marketing_Efforts___Uberflip_Content_Experiences.png

The other is the Exit Intent Popup, which is shown when the visitor moves their mouse near the top of the page (i.e. towards either their browser's Back or Close Tab/Window buttons):

_DRAFT_COPY__Serve_Hub_Content_Recommendations_on_Your_Website___Uberflip_Help.png

In both cases, interacting with the recommendation will expand it in a viewer, which can also recommend further Items for the visitor to look at next, or let them go back to the previous one:

Create_Better_Account-Based_Marketing_Campaigns___Uberflip.png

Does it Work on Mobile?

Site Engager will display recommendations in mobile browsers, as well, but the experience is slightly different. On mobile devices, only the the Promo Tile is used, where it appears as a banner at the bottom of the screen:

Account-Based_Marketing_Tools_to_Scale_Personalized_Content___Uberflip.png

This banner-style Promo Tile will appear on mobile phones and on tablets in portrait mode, while tablets in landscape mode and very large tablets (e.g. the iPad Pro) will still use the desktop-style Promo Tile.

Interacting with the banner-style Promo tile does not open the viewer. Instead, tapping on the recommendation banner will open the Item in a new browser tab/window. However, in cases where the regular Promo Tile is displayed on mobile (i.e. large tablets, or tablets in landscape), tapping on it will open the desktop-style viewer (note that the viewer will disappear if the user turns their tablet back to portrait mode).

The Exit Intent Popup will not appear on any mobile device, regardless of size or orientation. This is because it uses mouse movement to detect when a user is likely to exit the current page, which isn't available on mobile devices.

Install Site Engager on your Website

To use Site Engager on your website, you first need to install it. This is as simple as pasting a lightweight JavaScript snippet into the HTML of your website. You can choose to embed the snippet in the main template of your website, or on individual pages. Since Site Engager is configured entirely within the Uberflip App, you won't need to do any coding (or ask your developers for help) to set it up and use it.

To get the Site Engager snippet, log in to your Uberflip account and navigate to Website Tools > Site Engager using the sidebar menu on the left:
In the Site Engager interface on the right, click on the Embed Script tab:
Click on the Copy to Clipboard button to copy the code snippet.
Now, simply paste the snippet into your website's HTML, within the <body> tags.

Set Up Site Engager Recommendations

Once Site Engager is installed on your website, you can configure the recommendations it serves in the Uberflip app. As with recommendations on your Hub, you configure Site Engager recommendations using two core components:

Templates determine how recommendations are displayed on your website. They allow you to define the look and feel of your recommendations, such as how many Items are recommended, positioning of the Promo Tile, etc.
Rules define the placement and source of recommendations. In other words, they control where on your website a set of recommendations will be shown, and what content will be recommended. You can enable or disable individual rules, which allows you to control whether a specific recommendation setup is active (enabled) or inactive (disabled).

These components work together to serve recommendations. To configure Site Engager, you set up a rule to define the details of the recommendations (i.e. the "what" and the "where"), then assign a template to that rule to define look and feel. Finally, you enable the rule to begin serving the corresponding recommendations on your website.

If you're setting up Site Engager for the first time, we recommend that you begin by creating a template (to set up the look and feel). You can then create your first rule and use the template you set up with it.

Manage Templates

Create a Template

You can create as many templates as you like for different purposes. Templates can be assigned to different rules, and switched out at any time.

In Uberflip, navigate to Website Tools > Site Engager using the sidebar menu on the left:
In the Site Engager interface on the right, click on the Templates tab:
Your existing templates will be shown in the list below the tabs. By default, there will be only one template here, the Default Template.
To add a new template, click on the +New Template button in the top left:
Enter a name to identify your new template, as well as a brief description (optional) in the fields provided, then click on Add Template. (This name and description will only be visible within the Uberflip app, not to your website visitors.)
The Edit Template view will appear, where you can customize your template using the Display Options and Labels tabs. See below for instructions on how to configure the available options on these tabs. All changes you make here will be saved automatically and applied immediately.
You can also create new templates from the Edit Template view by copying an existing template. To do this, click on the "hamburger" menu button in the top right, then click on Copy Template:
Type in a name for the copy, then click on Copy Template. You'll be taken to the Edit Recommendation Template view for the new copy, and it will be added to your list of Recommendation Templates.

What's the Default Template?

The Site Engager Templates menu contains one pre-made template, the Default Template. It is automatically selected for all newly created rules.

The Default Template's purpose is to act as a fallback: if a custom template used by a rule is deleted, the Default Template will be used instead. As a result, the Default Template is the only template that can't be deleted — but you can modify it to suit your needs.

Edit or Delete a Template

You can edit or delete templates at any time, even if they are currently assigned to to one or more rules.

You can edit any existing template, including the Default Template. While viewing the list of templates (Site Engager > Templates tab), hover your mouse over the template you want to edit, then click on the pencil button on the right:
As with creating a new template, this will open the Edit Template view.
Deleting a template is similar to editing: hover your mouse over it, then click on the trash can button on the right. (Note that you can't delete the Default Template.)
You'll see a prompt asking if you're sure you want to delete the template. Click on OK to confirm the deletion.
- If the template is still associated with any rules, this will be noted in the prompt as well. You can still go ahead and delete the template if you want; in this case, any associated rules will switch to using the Default Template instead.

Customize Templates

You can customize the appearance of recommendations associated with a Recommendation Template using the Display Options and Labels tabs in the Edit Template view.

Display Options

Under the Display Options tab, you can set the following options:

Option	Description	Default	Notes
Max. Items to Display	Sets the maximum number of recommended Items to display (either in the panel or the carousel).	3 Items	Only takes effect if either Enable Promo Tile or Enable Exit Intent (or both) are set to enabled.
Max. Item Age	How old the oldest recommended Item can be. Set as a maximum number of days between the current date and the publish date, i.e. Items published longer ago than the setting not be displayed.	180 days
Enable Promo Tile	Toggles whether the Promo Tile is displayed. Enabled: Promo Tile is shown. Disabled: Promo Tile is not shown.	Enabled	If this option and Enable Exit Intent Popup are both disabled, no recommendations will be displayed.
Promo Tile Position	Sets where on the page the Promo Tile is displayed. Left: Bottom left corner. Right: Bottom right corner.	Left	Only takes effect if Enable Promo Tile is set to enabled.
Enable Exit Intent Popup	Toggles whether the Exit Intent Popup is displayed. Enabled: Exit Intent Popup is shown. Disabled: Exit Intent Popup is not shown.	Enabled	If this option and Enable Promo Tile are both disabled, no recommendations will be displayed.
Max Close per Session	Sets the maximum number of times recommendations will be displayed again after being dismissed, within a single session.	5 times
Brand Color	Sets a single brand color that is used to accent the Promo Tile and viewer.	Hex #CE0058 (Rubine Red)
Z-Index	Sets the stack order of Site Engager Promo Tile, Exit Intent Popup and viewer elements, relative to other elements on the page.	99999	Can be used to adjust positioning of Site Engager elements if they conflict with other widgets on the page. See this page for an explanation of z-index.
Timer: Show Promo Delay	Sets the time delay before the Promo Tile is displayed.	10 seconds	Timer starts after page finishes loading.
Timer: Scroll Stopped	Sets the time delay before the Promo Tile is displayed again after the visitor stops scrolling.	3 seconds
Timer: Show Next/Prev Delay	Sets the time delay before the Next and Previous Tiles appear in the viewer.	2 seconds	Timer starts after viewer opens.
Timer: Show Promo Again	Sets the time delay before the Promo Tile is displayed again after the visitor dismisses it.	20 seconds	Timer starts when Promo Tile is dismissed. Works together with Max Close per Session setting.
Timer: Show Exit Again	Sets the time delay before the Exit Intent popup is displayed again after the visitor dismisses it.	120 seconds	Timer starts when Exit Intent Tile is dismissed. Works together with Max Close per Session setting.

Labels

Under the Labels tab, you can specify the label text to be displayed next to various Site Engager interface elements:

Recommended: Sets the label shown above the Promo Tile.
Next: Sets the label shown above the "Next" tile on the right side of the viewer.
Previous: Sets the label shown above the "Previous" tile on the left side of the viewer.
Exit: Sets the label shown above the Exit Intent Popup.

Manage Rules

Create a Rule

Create rules to define where on your website the recommendations will appear, and what content will be recommended. You can create as many rules as you like.

In Uberflip, navigate to Website Tools > Site Engager using the sidebar menu on the left:
In the Site Engager interface on the right, you should be on the Rules tab by default (if not, click on the Rules tab). Your existing rules will be shown in the list below. If you're setting up your first rule, the list will be empty:
To add a new rule, click on the +New Rule button in the top left:
Enter a name to identify your new template, as well as a brief description (optional) in the fields provided, then click on Add Rule.
The Edit Rule view will now appear.
You can also create new rules from the Edit Recommendation Rule view by copying an existing rule. To do this, click on the "hamburger" menu button in the top right, then click on Copy Rule:
Type in a name for the copy, then click on Copy Rule. You'll be taken to the Edit Rule view for the new copy.

Set Up a Rule

Once you have created a rule, you can configure it to specify where it will serve recommendations, and what kinds of content it will include.

Right after creating a new Recommendation Rule, you should be in the Edit Rule view. Here, click on the Placement tab:
In the Template dropdown, you should see that the Default Template is already selected. If you want to use a different template with this rule, use the dropdown to select it. (You can also go directly to your list of templates by clicking on the View Templates link below the dropdown.)
Next to Show On, choose where you want the recommendations generated by this rule to be displayed:
- Any Page: Show recommendations on all pages on the website(s) where Site Engager is installed. Selected by default.
- Page URL Includes: Enter a directory or path that appears in some URLs on your website (e.g. /use-cases/sales). Recommendations will be shown only on pages whose URL contains the specified directory/path.
- Page URL Is Exactly: Enter a complete URL (e.g. https://resources.mycompany.com/webinars). Recommendations will be shown only on the page with this URL.
Next, click on the Recommended Content tab:
Use the dropdown next to Recommend to choose how recommendations will be generated for this rule:
- A.I. Engine: Let the Uberflip recommendation engine decide which Items to recommend, using machine learning and visitor intent data. If you choose this option, you'll see Recommend Items from below the dropdown:
  
  Use this setting to specify where the recommendation engine will draw recommendations from. Choose either Any Source or Marketing Stream or Select Streams. If you choose Select Streams, use the dropdown to choose the Stream(s). Selected Streams will be listed below the dropdown.
- Single Stream Source: Choose one Stream to draw recommendations from. If you choose this option, use the Stream List dropdown to choose the Stream you want to use:
Next to Show CTA at End, choose whether you want to display a Link or Form CTA as the final "recommendation" in the viewer (shown after the last recommended piece of content):
- Show a CTA: Use the dropdown to select the CTA to be displayed.
- Do not show a CTA: Do not select anything in the dropdown (leave it on Select a CTA). If you already selected a CTA and want to not show a CTA instead, click on the x next to the selected CTA to remove it.

Enable and Disable Rules

To activate a rule so that it starts serving recommendations, you must enable it. Likewise, to stop it from serving recommendations, simply disable the rule.

You can enable individual rules directly from the Rules tab. To do that, navigate to Website Tools >Site Engager > Rules tab, then find the rule you want to enable in the list.
Next to the rule you want to enable, on the right side, click on the toggle switch under the Enable column to set it to the on (green) position:
This will enable the rule, and Site Engager will soon begin serving recommendations according to the rule's settings.
To disable a rule, simply switch the toggle under Enabled back to the off (grey) position:
Site Engager will immediately stop serving recommendations as defined in the disabled rule (but will still serve recommendations according to any other enabled rules).
You can also enable and disable rules while you're in a rule's Edit Rule view on the Rule Info tab:

Note: Recommendations powered by the recommendation engine

If you have set up a rule powered by the recommendation engine, it can take 3-4 days for recommendations to start appearing. This is because the engine takes a little while to collect the data it needs to provide meaningful recommendations for visitors.

Note that the Hub from which recommendations are drawn must have visitors in order for recommendations to be generated. The recommendation engine also uses Bombora intent data, and Bombora likewise requires visitors to generate this data. If you only recently set up your Bombora integration and it has not yet collected enough visitor data, this means you won't see any recommendations yet.

Edit or Delete a Rule

You can edit or delete rules at any time, even if they are currently enabled. (Deleting an enabled rule will also deactivate it.)

You can edit any existing rule. While viewing the list of rules (Website Tools >Site Engager > Rules tab), hover your mouse over the rule you want to edit, then click on the pencil button on the right:
As with creating a new rule, this will open the Edit Rule view.
Deleting a rule is similar to editing: hover your mouse over it, then click on the trash can button on the right.
You'll see a prompt asking if you're sure you want to delete the rule. Click on OK to confirm the deletion.

Set Rule Order

You can set up rules in such a way that multiple rules can apply to a given page. If you have conflicting rules for a given page (i.e. two or more rules that apply to the page), you can adjust the rule order to determine which rule takes precedence and serves recommendations on that page.

Generally, conflicts occur where rules with narrow scopes (e.g. just one page) and wider scopes (multiple pages) overlap. When ordering conflicting rules, you want the rule with the narrowest scope to have the highest priority. That way, a rule scoped to just one page will only apply to that page, while more widely-scoped rules will apply to all other pages that don't have their own single-page rule.

While viewing your list of rules (Website Tools >Site Engager > Rules tab), find the rule you want to reorder.
Click on the number in the Order column for the rule:
Type in the new position in the order where you want this rule to appear (or use the arrow buttons), then press Enter:
The rule will be moved to the chosen position in the order, and the other rules in the list will be automatically reordered to accommodate the change (i.e. they will be shifted up or down the order by one position as needed):

Best Practice: The "Catch All" Rule

We recommend creating a "Catch All" rule to serve recommendations anywhere that no page-specific rule exists. This rule should offer general recommendations (ideally powered by the recommendation engine), and you should make sure that it is set to the lowest position in the order so that all page-specific rules take priority.