Architect Channel: Using Web Push
- 22 Apr 2024
- 8 Minutes to read
Architect Channel: Using Web Push
- Updated on 22 Apr 2024
- 8 Minutes to read
Article Summary
Share feedback
Thanks for sharing your feedback!
After you complete the integration process, you can start creating web push notifications in your journeys following the steps below:
1. Add web push channel on canvas
- Click the + button on the path you want to add web push channel on your journey.
- Click Channel > Web Push.
2. Set Message Icon
You can set a push icon in 3 different ways.
Your title goes here
Make sure that your website or mobile app’s images fit with a pretty small icon size. Push icon has a similar size to thumbnails. We do not recommend it if you don't have high-resolution images for icon size to be degraded.
Read more on adding icons to web push notifications here.
3. Add Message Title and Description
Add the title and description you want to send to your users.
If you want to be inspired or need assistance when creating your title and message, you can always use the Generate Text option.
To use an AI-generated text:
1. Click the Generate Text button to see the side modal.
2. Enter a prompt you want to generate the text about.
3. The language option will be the default selected language of your panel.
4. Select your industry and use case to define the context for the text to be generated.
5. Click the Generate Copy button.
If you want to include emojis in your copy, you can check the "Include Emojis" box.
Your title goes here
This option indicates that the AI can generate copies with emojis. However, not all options might include emojis.
The modal displays 5 suggestions. To see more, you can click the Generate More Suggestions button.
To use any suggestion, you can select it and click the Apply button, or copy it via the Copy button against the suggestion you want to use.
Once you click the Apply button, the copy will be added to the respective field.
You can use default and custom user attributes, event parameters, and coupon code in the content to personalize it for your users. Read more on dynamic content.
For users who do not have a value for the dynamic content, you can add alternative text (fallback) by clicking on the content tag.
Your title goes here
Architect excludes dynamic content from the character limit calculation. When you add any dynamic content, it does not have an impact on the character count. When you assign a fallback value to the dynamic content, it will be displayed to the user if the dynamic content's value is empty for that user. In this case, the character count includes the fallback value.
The plus sign in the character count indicates that dynamic content will receive a value upon message delivery to the end user.
The plus sign in the character count indicates that dynamic content will receive a value upon message delivery to the end user.
Your title goes here
Various factors such as browser, operating system, screen resolution, and input language affect how the title and description will be displayed. For instance, the text may be trimmed on some devices. That's why we recommend keeping the content brief.
Also, you can use emojis in your messages to increase the open rates.
4. Configure coupon settings
You can enable the coupon settings when you add a coupon in your web push. Before adding any dynamic content in your message, you will see the settings section as below.
You can add a coupon code in your web push message by using the Coupon Code attribute.
Once you add your coupon and save the design, you will see the coupon settings enabled. Select a coupon list to proceed.
.png)
Select the action that you want your journey to take when the coupons are used up expire. You can skip the element, stop the journey or use a fallback coupon.
Your title goes here
Read more on coupon lists.
.png)
5. Add Message Link
You can set a link in your web push notifications in two different ways.
- Custom Link: Manually typing the desired URL. Make sure that you type a valid and secure URL.
- Dynamic Link: You can select a dynamic link URL based on the user’s action such as “Last Abandoned Product URL” or URL type event parameters.
Read more on link types here.
6. Add UTM parameters
You can configure UTM settings to keep track of web push performance on your Google Analytics.
Read more on UTM settings here.
7. Add Message Action Buttons
You can use call-to-action buttons in your web push notifications to increase user interaction.
You can have 2 buttons if you would like to show users. You can type the URL of Buttons or you can select dynamic link as you do for the Link section. You can select URL type attributes or event parameters.
Your title goes here
You can add the fallback URL for users who do not have a value for the dynamic URL.
Read more on action buttons here.
8. Using rich push
You can upload a rich push image on your web push notification if you want to offer more visual content. You can either upload an image or provide a dynamic image source for the rich push image.
Read more on rich push here.
9. Preview your content
You can preview how your web push looks like before you send it out. On the preview placed on the right side of your screen, you can see text, image, icon, link, button elements and UTM parameters. No dynamic content can be previewed as you do not have any value for these attributes on this step.
You can view how your web push will look in operating systems and browsers:
- Android
- Chrome
- Samsung Internet
- Windows
- Chrome
- Firefox
- iOS
- Chrome
- Firefox
You can also switch between collapsed and expanded views from the dropdown.
You can also preview the dynamic content in your messages as a user. Click the Preview as User button to preview your message with real values of the dynamic content.
You can select one of the two User Selection Methods: User Identifier or Recent User. User Identifier will let you search for a user with Profile ID, Email Address, or Phone Number identifiers. Recent User will list the 10 recently searched users for you to choose from.
Once you select your user, click the Preview as User button to load the channel preview with real values of dynamic content for the user.
10. Enable Send Time Optimization
You can optimize the time to deliver your messages to the end-users. It helps you engage your users more effectively and draw their attention when they are most likely to interact with your messages.
Your title goes here
You should enable send time optimization based on your use cases. For example, send time optimization might not be a good fit for cart or browse abandonment cases.
If you set Channel Frequency Capping before, when you enable Send Time Optimization, Bypass Channel Frequency Capping will be automatically enabled.
11. Bypass Channel Frequency Capping
Architect enables you to override global web push frequency capping if you have configured any.
Journeys are for real-time cases and they require users to receive notifications based on their actions. Therefore, you may want to override the global frequency capping you set for your web push notifications.
If a user reaches the limit of the web push notifications they can receive, they will proceed to the next step without receiving another one when they arrive at the web push channel in the journey.
12. Set time to live
Time to live enables you set a period in which the system can send a notification to the user.
your title goes here
If you have another channel after the web push channel on your journey and an offline user does not receive the notification, they will proceed to the next step on the flow. For example, they proceed to the email element after the web push element. When they become online again, they will receive the notification they would receive at the web push element.
Make sure to set your time to live accordingly.
your title goes here
You can set a short time to live if you have another follow-up channel on the flow.
your title goes here
You can set the same duration for time to live as that of the wait element which comes after the web push channel.
13. Test your web push notification
You can click the Test Message button at the bottom right corner of the page to send a test web push notification to your device.
your title goes here
Dynamic content cannot be seen in test messages with the real data since it is user-based and the user is not known while using Test Message.
14. Rename Channel Name
Channel Name is generated by default based on journey name and channel type. You can rename it at the top right corner if you want to give it a different name. 
15. Save web push element
After configuring web push settings, you can save the web push page.
Make sure to click the Save button as there is no autosaving on this page. Autosaving functions only on the canvas page.
Live Actions and User Interactions
Live Actions
You can keep users on the flow until they click, close or view the web push notification. To use this live action, you can select “On Click”, “On View” or “On Close” actions right after the web push element. The default action is “On Send”. You do not need to set any if you do not want to use this feature.
your title goes here
The user will remain in the journey unless they click, close or view the web push notifications, or you change the journey status to 'passive'.
Your title goes here
In case you have more than one link in your message, the users proceed to the next step if they click any of them.
For example, if you select “On Click” and the user closes the notification, they cannot proceed to the next step as web push notifications are one-time actions.
User Interactions
After the web push element, you can take another action via branching your flow according to user interactions on the web push notification after a while.
Read Check Interaction for further details.
your title goes here
Users do not take any action on the notification right after you send it. That's why you need to give users some time to take the desired action on the channels by adding a wait element before the check element.
Was this article helpful?