Popups can be a great way to engage users with timely content. A popup overlays on the top of your website instead of displaying inside a predetermined area (<div>) on the page. Since a popup prevents your customers from using your site until they have engaged or dismissed the content, it is very important to ensure that it is displayed only at the appropriate moment. 

With Blueshift, you can display popups on your website using a Live Content campaign .

Let’s look at an example use case and see the steps required to display a popup. You can follow the same steps for any other use case as well.

Example

In this example, we will set up a campaign to display a popup message to the customer informing them about a special discount offer. If the customer dismisses the popup, the popup will not be displayed for the next 3 days. The popup will not be displayed again if the customer clicks a link or a button within the popup content.

You can use a similar campaign to remind customers to renew subscriptions, update expiring credit card information, accept updated terms and conditions for your site and so on.

Here are the steps involved:

  1. Create a popup slot.
  2. Set up an HTML template that defines the content that will be displayed in the slot.
  3. Set up a Live Content campaign to display the popup.
  4. Integrate the popup slot with your website page.

Create a popup slot

To add a new popup slot, complete the following steps:

  1. Go to Creatives > Live Content
  2. Go to the Slots tab and click +SLOT.
  3. Add the slot Name.
  4. Select slot Format as Popup.
  5. Click Create.

In the following example, the slot is named as popup_promo.

usecase_popup_slot.png

Set up an HTML template for the popup content

  1. To add a Live content HTML template, complete the following steps:
  2. Go to Creatives > Live Content
  3. Go to the Templates tab and click +TEMPLATE
  4. Click HTML template.
  5. Add the name for the template. In this example, we have added the name as popup_promo_winter.
  6. Select Layout as Popup.
  7. Go to the Template Info tab and set the template properties.
      usecase_popup_templateinfo.png
     
  8. Go to the Source tab and add the content for the popup.
      usecase_popup_content.png
     
  9. Optionally, you can also add custom elements to the popup content from the Elements tab.
  10. Preview the popup content
  11. Save the template.

Set up a Live Content campaign

To set up a Live Content campaign journey, complete the following steps:

  1. Go to Journeys > Campaigns in the left navigation and click +CAMPAIGN.
  2. Select Live Content, add a Name for your campaign and click CREATE CAMPAIGN.
    In this example, the campaign is named as popup_promo.
  3. For the Slot, select the slot that you created in Step 1.
    In the example, the slot is named as popup_promo.
  4. For the Template, select the template that you created in Step 2.
    In the example, the template is named as popup_promo_winter.
  5. You can select a Segment to target a specific set of customers.
    In this example, we are targeting all customers.
  6. Set a Start date and an End date.
  7. Set a Priority for the campaign.
  8. Add the following filters to the campaign.
    • The following filter ensures that the popup is displayed only after 3 days if the customer dismisses the popup.
      1. In the filters section, go to the "Matches none of these" group and click +Add Condition.
      2. Select "Messaging Attributes".
      3. For the Timeline, select within past 3 Days.
      4. Select Channel as Live Content.
      5. Select Action as Dismiss.
      6. Select Campaign as "popup_promo". Note that this filter refers to the current campaign itself.
      7. Click Save.
    • The following filter ensures that the popup is not displayed again if the customer clicks any links or buttons in the popup content.
      1. In the filters section, go to the "Matches none of these" group and click +Add Condition.
      2. Select "Messaging Attributes".
      3. Select Channel as Live Content.
      4. Select Action as Click.
      5. Select Campaign as "popup_promo". Note that this filters refers to the current campaign itself.
      6. Click Save.
      7. Save the campaign.

You can preview the campaign by selecting a Preview User and clicking Preview Launch. Note that you will be able to see a preview only if the current date and time is within the campaign date range. If your campaign is set to start at a future date, temporarily set the campaign Start date in the past so that you can see a preview.

usecase_popup_campaign.png

Integrate popup slot with website page

For the popup to display on your website, you must invoke the slot via blueshift.js.

You must also invoke the blueshift.identify({}) function and pass information about the customer using a customer identifier. By identifying the customer, Blueshift can correctly apply messaging filters and other customizations. For anonymous users without any user identifiers, you should still call the identify function without any arguments (ex. blueshift.identify({})). This is required for Blueshift to show the default campaign content.

For more information, see Integrating popup slots.

blueshift.identify({email: "janedoe@demosite.com"})
blueshift.live({    popup_promo: {     popup: true   }  })

Note that `popup: true` is passed into the slot context for the `popup_promo` slot. This lets blueshift.js know that `popup_promo` is a popup which does not require a <div> element on the page.

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.