Onboarding carousel popup template

This carousel template is an example foronboarding a mobile application or a website during which the user will be invited to subscribe to push notifications and then to share their location. It is composed of three swipeable screens that can be easily customized to match other use cases.

980980

An onboarding carousel that lets you subscribe to push and ask for geolocation permission

Collected data

This popup contains a javascript program that calls the subscribeToNotifications() method of the WonderPush SDK when clicking the button "Allow" (on the first slide) and the method triggerLocationPrompt which asks the user to share his geolocation (on the second slide).

window.WonderPushPopupSDK.trackEvent('Subscribe', {string_email: email}).then(function () {

You can retrieve the response rates for your question on the detail page of your popup:

15131513

Audience

By default, the audience is set to Everybody.

12801280

But you could also target on of your segments, for example the segment "New Users"

You can further restrict the audience by adding more criteria by clicking "Add criteria". There is a complete reference of the data you can use to segment your audience, there is also a guide to get started with audience segmentation

Trigger

The default settings of the carousel template trigger will show the popup right away upon the first visit of your website, then a second time when users visit more than 24h later.

15311531

Triggering the popup immediately on first visit, and only once.

Triggering on exit

A common variant of this is to trigger a carousel when users are about to leave, at the end of their first visit, and another time if they visit more than 24h later. That would be done by setting the trigger to "When visitor is about to leave" and keeping the max impressions and time between impressions value unchanged.

19101910

Triggering the popup when users are about to leave (Exit intent)

Waiting for a few page views

You can also wait for a number of page views before showing the popup, and show the popup many times at a week interval

19041904

Waiting for 3 page views before showing the popup, and show it 5 times at 7 days interval

Content

The carousel template contains three slides, each one with:

  • a title, "Stay up to date" for slide-1
  • a text, "Get our latest news and offers" for slide-1
  • an image
  • a CTA button, "ALLOW NOTIFICATIONS" for slide-1
  • a dismiss button, "Later" for slide-1

Adapt the title by changing this line:

<h1>Stay up to date</h1>

Adapt the text by changing this line:

<p>Get our latest news and offers</p>

Adapt the image by changing this line and putting the URL of another image in the src attribute:

<img src="https://cdn.by.wonderpush.com/upload/01d48biaffai1lb2/17be02b50c2956b97ce51a3d83eb50e922c90b24/v1/large"/>

Adapt the Allow buton text by changing this line:

<button data-wonderpush-button-label="subscribeToPush" onclick="WonderPushPopupSDK.subscribeToNotifications(); window.location='#slide-2';" class="btn-primary">Allow notifications</button>

Adapt the dismiss button text by changing this line:

<button data-wonderpush-button-label="skipSubscribeToPush" onclick="window.location='#slide-2'" class="btn-secondary">Later</button>

Look and feel

Colors and fonts of texts and buttons can be adapted in the CSS editor:

10861086

Adding a background image

Add the following CSS (adapt https://example.com/image.png) to add a background to the main section, making sure the background is stretched to cover the entire section (but keeping its aspect-ratio):

#content {
  background-image: url(https://example.com/image.png) !important;
  background-repeat: no-repeat;
  background-size: cover;
}

Adding a specific background image to each screen

Add the following CSS (adapt https://example.com/image1.png) to add a background to the slide-1 element, making sure the background is stretched to cover the entire section (but keeping its aspect-ratio):

#slide-1 {
  background-image: url(https://example.com/image1.png) !important;
  background-repeat: no-repeat;
  background-size: cover;
}

And repeat it for slide-2 and slide-3

Button colors

Add the following CSS.

.btn-primary {
  background-color: blue !important; /* Adapt "blue" to the desired color */
}

Adding specific button colors to each screen

Add the following CSS.

#slide-1 .btn-primary {
  background-color: red !important; /* Adapt "red" to the desired color */
}

And repeat it for slide-2 and slide-3

Text color

To adapt the colors of the title, input, button and dismiss button, adapt the following.

/* Use the following for the main button */
.btn-primary {
  color: red !important; /* Adapt "red" to the desired color */
}

/* Use the following for the dismiss button */
.btn-text {
  color: red !important; /* Adapt "red" to the desired color */
}

/* Use the following for the title */
h1 {
  color: red !important; /* Adapt "red" to the desired color */
}

/* Use the following for the placeholder input */
input::placeholder {
  color: red !important; /* Adapt "red" to the desired color */
}

/* Use the following for the user content input */
input {
  color: red !important; /* Adapt "red" to the desired color */
}

Adding specific text colors to each screen

Simply add the prefix referring to the chosen slide like this:

/* Use the following for the title of the slide 1 */
#slide-1 h1 {
  color: red !important; /* Adapt "red" to the desired color */
}

/* Use the following for the button of the slide 1 */

#slide-1 .btn-text {
  color: red !important; /* Adapt "red" to the desired color */
}

/* decline for the other elements you want to modify for each slide */

FAQ

How do I remove the "Powered by WonderPush"

Just remove this line:

<a href="https://www.wonderpush.com/" target="_blank" class="powered-by-wonderpush">Powered by <strong>WonderPush</strong></a>