In this lesson, you will learn and implement the workflow that contains a push capture strategy to encourage your visitors to subscribe to this communication channel.
Take advantage of the push channel to immediately impact a larger volume of contacts through browser notifications.
Objective: Capture.
Elements used: Push notification, inline.
Implementation time: 1.5 hours.
We recommend that you follow all the steps and implement this strategy from scratch in your account, but if you need a quick route, in the Workflow Template Directory you will find the template Push Subscription Using Browser Notification, which you can use.
Lesson Summary
In this lesson you will learn:
- 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" node to utilize this communication channel.
By the end of the lesson, you will have created in your account:
The push capture strategy contained in this workflow, through which you will send your visitors a native browser inline to subscribe to this communication channel, which you can leverage in future campaigns.
Preliminary Considerations
In this lesson, an invisible inline content is created, which will trigger a subscription request for push notifications to those visitors who do not have them activated. For it to work, you must have configured the ServiceWorker in your integration process with Connectif. If you haven’t done so, at the end of this article you will find documentation on how to configure the push channel.
Each browser will display the notification differently, so its appearance cannot be edited like other types of inline web content.
Strategy Configuration
STEP 0. Creating the workflow
How to create the workflow for this strategy
1. In your Connectif account, click on "Workflows > Create new Workflow" and then on Create Blank Workflow.
2. Click on (Edit) and name it "Push Subscription Using Browser Notification".
3. Click on Apply to save the new name of your workflow.
STEP 1. "Start" Node
How to configure the "Start" Node for this strategy
(This node sets the audience to which the workflow will be directed).
4. Click on (Edit node configuration) of the “Start” node.
5. Under Select a restriction, check "My entire list".
6. Under Select data source, check "All existing and new".
7. Click on Update.
In this step, we told Connectif that the workflow will activate for all contacts visiting 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 trigger the next workflow action, in this case sending the subscription inline for push notifications, when a contact visits your website).
8. In the node selection menu, go to "Triggers > Web" and drag the "On Page Visit" node to the editor, connecting it to the "Start" node.
9. Click on (Edit node configuration) of the “On Page Visit” node.
10. Click on Restrictions and uncheck the "Disable after firing" box.
11. Click on Update.
In this step, we told Connectif that whenever a contact visits any page of the website from any device, it should proceed to the next action.
STEP 3. "Check Value" Node
How to configure the "Check Value" Node for this strategy
(This node will check if your visitors are subscribed to your push notifications, so it won't send the inline if they already have them activated).
12. In the node selection menu, go to "Conditions > System" and drag the "Check Value" node to the editor, connecting it to the "On Page Visit" node.
13. Click on (Edit node configuration) of 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 box set to "Yes" to indicate to Connectif that the push subscription status should be "Yes" in the contact's profile.
17. Click on Update.
In this step, we instructed Connectif to check if visitors have the push notification subscription field set to "Yes." If they are not subscribed, the flow will continue and send them the subscription notification. If the contact is subscribed, the strategy will stop.
STEP 4. "Send Web Content" Node
How inline web content works
Inline web content is inserted within the page without needing to modify its code or alter its structure. It is used to display personalized content or HTML code anywhere on the website.
It is designed in the Content Editor, so no programming knowledge is needed to create it.
An inline 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 will create the user capture inline for push notifications).
18. In the node selection menu, go to "Actions > Web" and drag the "Send Web Content" node to the editor, connecting it to the "Check Value" node.
19. On the connection between this node and the "Check Value" node, click the circle until "No" appears.
20. Click on (Edit node configuration) of the “Send Web Content” node and Create new content to generate new content.
21. When creating new content, select the type Inline, assign it a name, for example "Native push notification", and click on 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 on Save to keep the changes in the design and then on Back to selector to return and finish configuring the node.
How to configure the "Send Web Content" Node for this strategy
(This node will display the push subscription confirmation inline to contacts who are not subscribed).
24. Once the Inline content is selected, click Next .
25. Under Configuration, add the appropriate selector to display the content. In this case, it is recommended to include the content in an element that appears on all pages, for example in the footer. Future lessons will explain how to find the right selector to insert any inline.
26. Under Restrictions, create an external restriction in Restriction to other nodes, as follows:
In the dropdown Select node, choose the option "On Page Visit" to restrict this node.
Under Select restriction type, choose "Disable for a time" and enter “1” in the “Day” field.
Click on Add external restriction to save its configuration.
27. Click on Finish .
In this step, we instructed Connectif to send the subscription inline we just created to visitors reaching this part of the flow. With the restrictions, this inline will only be sent once a day if the contacts are not subscribed.
STEP 5. "On Push Subscription" Node
How the "On Push Subscription" Node works
This node is used to react at the moment a contact subscribes to push notifications. The node interface does not have configuration options.
How to configure the "On Push Subscription" Node for this strategy
(This node will trigger the next workflow action, 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 Subscription" node to the editor, connecting it to the "Send Web Content" node.
29. Click on (Edit node configuration) of the “On Push Subscription” node.
30. Under Restrictions, uncheck the "Disable after firing" box and, under "Temporarily disable after event", enter “1” in the “Day” field.
31. Click on Update.
In this step, we told Connectif that once the contact subscribes to push notifications, the next step of the workflow should activate.
STEP 6. "Show Push" Node
How the "Show Push" node works
This node is used to display a specific push notification to contacts who reach that part of the workflow. In the node interface, all aspects of the notification to be shown are configured step by step:
- Notification configuration. To select a previously created push notification or configure a new one in the web push notification editor. You can also set an expiration date for the notification in this step.
- Field and value configuration. To assign or modify the values of the variables included in the push notification.
How push notifications work
Web push notifications are instant and fully customizable messages that contacts receive on their devices. This immediate and individualized communication allows you to impact users at the right times and places to increase conversion rates, even when they are not visiting the website.
They are designed in the Push Notification Editor, so no programming knowledge is needed to create them.
How to configure the push notification for this strategy
(In this step, you will create the welcome push notification for contacts who have accepted the subscription).
32. In the node selection menu, go to "Actions > Web" and drag the "Show Push" node to the editor, connecting it to the "On Push Subscription" node.
33. Click on (Edit node configuration) of the “Show Push” node. Click on Create new content or (optional) on Edit to modify an existing notification.
34. When creating a new notification, in the Tools panel, click on the General tab to edit the general appearance parameters of your notification.
35. In General, edit the design and creation options of your push.
In Notification Title, add the name that will appear at the top of the message.
In Notification Message, add the body text.
In Add a redirect URL, configure the page where contacts will be sent when they click the notification. It must be an absolute link. If the "close on click" tab is checked, the notification will close when the contact clicks it.
-
In Image URLs, configure the three types of images that the editor allows
Icon URL: the image that appears in the upper left corner as an icon.
Image URL: the featured image. It is shown in the template occupying the lower half of the notification.
Notification tray icon URL: the image that will appear in the notification tray of the device receiving the push.
36. In the Compact Version section, configure how this notification will look in the browser window corner.
- In Compact message, add the body text that will appear in the popup window.
- In Compact icon URL, add the image that will appear in the upper left corner as an icon.
37. (Optional). Add variables to any of the fields, both in the full and compact version. To do this:
- Click (Define a dynamic variable) 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 distinguish it. In this example, we will assign the identifier "Name".
- In Default value, add the value you want the variable to have when no data is 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 on Preview to review the final result of your notification, and/or on Preview compact to review the result in compact version.
39. Click on Save to keep the changes in the design and then on Back to content list to return 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 created variables for your content, link them to Connectif fields by selecting the corresponding field from the left column and assigning it to the variable. In this example, the "Name" field will provide the value for the variable "Name".
42. Click on Finish .
In this step, we instructed Connectif to send a welcome push notification to contacts once they subscribe.
Result
After completing the steps, you will have created your push capture strategy using the browser notification, which will be sent to visitors who do not have this channel activated to invite them to subscribe to your push notifications. Once they sign up, you will send them a welcome notification.
Continue your journey
Now that you have completed this lesson, continue with the next one, in which you will create a Abandoned Cart Funnel in your account.
Congratulations!
You have reached the end of the lesson.
Return to the course
Access the full course index and explanation of each lesson at this link.
Related readings
If you want to deepen your knowledge of any of the lessons learned in this lesson, you can access the guide documentation:
- Inline web content, to learn how this content works, which you can edit from the Web Content Editor you learned to use in the first lesson.
- Configure web push notifications, to ensure you have integrated push notification sending in your Connectif account.
- Static segment, to learn how to create a test segment to test your workflows.