In this lesson, you’ll learn and implement the workflow containing a push acquisition strategy to encourage visitors to sign up for this communication channel.
Take advantage of the push channel to immediately target more contacts via browser notifications.
Objective: Acquisition.
Elements used: Push notification, inline.
Implementation time: 1,5 hours.
We recommend following all the steps and implementing this strategy from scratch in your account. However, if you need a shortcut, you can use the Push subscription using browser, template in the Template Assistant.
Lesson summary
In this lesson, you’ll learn about:
- How to create inline content and insert it into your website.
- How to create a push notification with the Push Notification Editor.
- How to use the "Show push notifications" node to use this communication channel.
At the end of the lesson, you will have created in your account:
The push acquisition strategy contained in this workflow, by which you’ll send visitors inline content natively in the browser to subscribe to this communication channel, which you will be able to use in future campaigns.
Preliminary considerations
In this lesson, you’ll create invisible inline content, which will trigger a push notification subscription request for visitors who have not activated push notifications. For it to work, you must have configured the ServiceWorker when carrying out the integration process with Connectif. If you have not done so, you’ll find documentation on how to configure the push channel at the end of this article.
Each browser will display the notification in a different way, so its appearance cannot be edited, unlike that of other inline web content.
Strategy configuration
STEP 0. Workflow creation
How to create the workflow for this strategy
1. In your Connectif account, click "Workflows > Create new workflow" and then Create blank workflow.
2. Click (Edición) and name it "Push subscription using browser notification".
3. Click Apply to save the new name of your workflow.
STEP 1. "Start" node
How to configure the "Start" node for this strategy
(This node will establish the target audience for the workflow).
4. Click (Edit node settings) for the “Start” node.
5. Under Select limitation, check "All my list".
6. Under Select data source, check "All existing and new".
7. Click Update.
In this step, we have told Connectif to activate the workflow for all contacts that visit the website, both new and existing.
STEP 2. “On page visit” node
How to configure the "On page visit" node for this strategy
(This node will cause the next workflow action, in this case sending the push subscription inline message, to be triggered when a contact visits your website).
8. In the node selection menu, go to "Triggers > Web" and drag the "On page visit" node into the editor so that it connects to the "Home" node.
9. Click (Edit node settings) in the “On page visit”.
10. Click on Limitations uncheck the "Deactivate after triggering" box.
11. Click Update.
In this step we have told Connectif to send the contact to the next action when they visit any web page from any device.
STEP 3. “Check value” node
How to configure the "Check value" node for this strategy
(This node will check if your visitors have signed up to your push notifications, to avoid sending the inline message to visitors who are already subscribed).
12. In the node selection menu, go to "Conditions > System" and drag the "Check value" node into the editor, so that it connects to the "On page visit" node.
13. Click (Edit node settings) in the “Check value” node.
14. Drag the "Has push subscriptions" field from "Contact" to the left block.
15. Under Operator, select "Is equal to".
16. Drag the "Literal" field to the right block and leave the checkbox set to "Yes", to tell Connectif that the push subscription status should be "Yes" in the contact's file.
17. Click Update.
In this step we have told Connectif to check if visitors have the push notification subscription field set to "Yes". If they are not subscribed, the flow will continue and the subscription notification will be shown to them. If the contact is subscribed, the strategy will stop.
STEP 4. “Send web content” node
How inline web content works
"Inline" web content is displayed as an insertion within the page, without the need to modify its code or alter its structure. It is used to display custom content or HTML code anywhere on the web.
Pop-up web content is designed in theContent editor, so no programming knowledge is required to create it.
Inline content generates statistics related to its views, interactions and participation in the purchase process.
How to configure inline web content for this strategy
(In this step you’ll create the inline user acquisition message for push notifications).
18. In the node selection menu, go to "Actions > Web" and drag the "Send web content" node into the editor so that it connects to the "Check value" node.
19. At the junction of this node with the "Check value" node, click on the circle until "No" appears.
20. Click (Edit node settings) of the “Send web content” node and Create new content to generate new content.
21. When creating new content, select Inline, as the type, give it a name, for example "Native push notification", and click Create new content.
22. Add an HTML component and edit it by copying and pasting the following code snippet:
<script>
connectif.subscribeToPushNotifications(function (error){
if (!error){
connectif.managed.sendEvents([]);
}
});
</script>
23. Click Save to keep your changes to the layout and Back to selector to go back and finish configuring the node.
How to configure the "Send web content" node for this strategy
(This node will show contacts who are not subscribed the inline message to confirm push receipt).
24. Once you have selected Inline content, click Next .
25. In Configuration add the appropriate selector to display the content. In this case, it is advisable to include the content in an element that is displayed on all pages, for example in the footer. Future lessons will explain how to find the right selector to insert any inline content.
26. In Limitations, create an external limitation in Limitation to other nodes as follows:
- In the Select node choose the "On page visit" option to limit this node.
- In Select limitation type, choose the option "Deactivate for a period" and write “1” in the “Day" field.
- Click Add external limitation to save your settings.
27. Click Finish .
In this step, we have told Connectif to send the subscription inline content that we just created to visitors that arrive at this part of the flow. With the limitations, this inline content will only be sent once a day to contacts who are not subscribed.
STEP 5. “On push notification subscription” node
How does the "On push notification subscription" node work?
This node is used to react when a contact subscribes to push notifications. The node interface has no configuration.
How to configure the "On push notification subscription" node for this strategy
(This node will cause the next workflow action to be triggered, in this case sending a welcome push notification, when a contact agrees to receive these communications).
28. In the node selection menu, go to "Triggers > Web" and drag the "On push notification subscription" node into the editor so that it connects to the "Send web content" node.
29. Click (Edit node settings) in the “On push notification subscription” node.
30. Under Limitations, uncheck the "Disable after triggering" checkbox and, under "Temporarily disable after event, type “1” in the “Day" field.
31. Click Update.
In this step we have instructed Connectif to activate the next step of the workflow once the contact subscribes to push notifications.
STEP 6. “Show push notifications” node
How the "Show push notifications" node works
This node is used to display a specific push notification to contacts that arrive at that part of the workflow. In the node interface, all aspects of the notification to be displayed are configured in steps:
- Notification settings. To select a previously-created push notification or configure a new one in the web push notification editor. In this step, you can also set an expiration date for the notification.
- Configuration of fields and values. To assign or modify the values of the variables included in the push notification.
How push notifications work
Web push notifications are instant, fully customizable messages that a contact receives on their device. This instant, one-on-one communication allows you to reach users at the right time and in the right places, even when they aren’t visiting your website, to increase conversion rates.
It’s designed in the Push notifications editor, so no programming knowledge is required to create it.
How to set up the push notification for this strategy
(In this step you’ll create the welcome push notification to contacts who have accepted the subscription).
32. In the node selection menu, go to "Actions > Web" and drag the "Show push notifications" node into the editor so that it connects to the "On push notification subscription" node.
33. In the “Show push notifications” node, click (Edit node settings) . Click Create new content or (optionally) Edit to modify an existing notification.
34. When creating a new notification, in the Toolbox panel, click the General tab to edit the parameters of the general appearance of your notification.
35. Click the Push notification title add the name that will appear at the top of the message.
- Under Push notification title, add the name that will appear at the top of the message.
- Under Push notification message, add the body of the text.
- Under Add a URL to redirect, configure the page to which contacts will be sent when they click on the notification. It must be an absolute link. If the "Close on click" box is checked, the notification will be closed when the contact clicks on it.
- In Image URLs, configure the three image types that the editor allows
- Icon URL: this is the image that appears in the upper left corner, as an icon.
- Image URL: this is the featured image. It is shown in the template occupying the lower half of the notification.
- URL of the notification tray icon: this is the image that will appear in the notification tray of the device on which you receive the push.
36. In the Compact version tab, configure how this notification will be displayed in the corner of the browser screen.
- Under Compact message, add the body text that will appear in the pop-up window.
- For the URL of the compact icon, add the image that will appear in the upper left corner as an icon.
37. (Optional). Add variables to any of the fields in both the full and compact versions. To do this:
- Click (Define a dynamic variable) in the place where you want to include the variable. In this example, we will create a variable for the notification title.
- • Assign a name to the variable to identify it. In this example, we will assign it the identifier "Name".
- Under Default value, add the value you want the variable to acquire when there is no data stored in the corresponding field. In this example, we will assign the default value "Hello".
- Click Accept to save the changes to the variable.
38. Click Preview to view the final result of your notification, and/or Preview compact to view the result as a compact version.
39. Click Save to keep your changes to the layout and Back to content list to go back and finish configuring the node.
How to configure the "Show push" node for this strategy
(This node will send the welcome push notification).
40. Select the web push created in the previous step and click Next .
41. (Optional). If you’ve created variables for your content, link them to the Connectif fields by selecting the corresponding field from the left column and assigning it to the variable. In this example, the "Name" field will give value to the "Name" variable.
42. Click Finish .
In this step we have instructed Connectif to send a welcome push notification to contacts once they subscribe.
Result
After completing these steps, you will have created your push acquisition strategy using a browser notification. It will be sent to visitors who do not have this channel enabled to invite them to subscribe to your push notifications. Once they sign up, you’ll send them a welcome notification.
Continue your tour
Now that you have completed this lesson, continue with the next one and create an Abandoned cart funnel in your account.
Congratulations!
You’ve reached the end of the tutorial.
Back to course
Access the complete course index and explanation of each lesson here.
Related reading
If you want to dive deeper into any of the topics covered in this lesson, you can access the guide documentation:
- Inline web content, to learn how this content works. You can edit it in the Web Content Editor, which you learned to use in the first lesson.
- Configure web push notifications, to ensure that you have integrated push notifications in your Connectif account.
- Static segment, to learn how to create a test segment with which to test your workflows.