Cet article est actuellement disponible en anglais et en espagnol. Vous pouvez vous servir de cette documentation en attendant qu'elle soit disponible dans votre langue.
The web push notification editor allows you to visually design the content of the web push notifications that will be sent to your customers from your account through workflows created for this purpose.
How to Access?
You can access the web push notification editor through two paths:
1. From "Content > Web Push Notifications". Click Create New Web Push Notification to create a new push, or click More and select Edit to modify an existing notification.
2. From the "Show Web Push Notification" node in a workflow, by clicking (Edit Node Settings). Click Create New Content or Edit to modify an existing notification.
Interface
The web push notification editor consists of 3 sections:
1. Preview, Save, and Translate: Save or discard changes, use automatic translation to translate content, delete it, or preview the final result of the content displayed by the browser.
2. Design Panel: Visually build the push notification using the visual editor.
3. Tools: Configure all notification properties and add content. This panel can be expanded or collapsed by clicking (Open Tools) or (Close Tools).
How It Works
The web push notification editor is based on a visual builder that allows you to create notifications quickly and easily, showing changes in real time.
1. Add Content and Edit General Options
In the Tools panel (3), click on the General tab to edit the content and general appearance options of the push, which will display changes in real time in the design panel.
The elements and parameters to define are:
- Notification Title: Text that will appear at the top of the message.
- Notification Message: The main body of the notification text.
- Add a Redirect URL: A link to the specified page. It must be an absolute URL.
If you select the checkbox "Close on Click", the notification will close when the contact clicks on it.
-
Image URLs:
- Icon URL: The image that appears in the upper left corner, as an icon.
- Main Image URL: The featured image. It is displayed in the template, occupying the lower half of the notification.
- Notification Tray Icon URL: The image that will appear in the device's notification tray.
-
Advanced Properties:
- Add a Vibration Pattern: A specific vibration rhythm you can add to this notification.
-
Requires Contact Interaction: A selector to configure whether the contact needs to interact with the device to stop the vibration.
-
This is a Silent Notification: A selector to configure the notification to emit no sound.
2. Add a Compact Version
In the Tools panel (3), click on the Compact Version tab to add a reduced version to your notification's content.
The compact version is a reduced type of web push notification that does not display the featured image.
The components are:
- Compact Message: The main text of the notification that appears in the popup.
- Compact Icon URL: The image appearing in the upper left corner as an icon.
3. Add Variables to the Push Notification
Both versions of the push notification allow adding variables in any of the push elements to personalize them.
To do this, click on {} (Define a Dynamic Variable) in the place where you want to include the variable.
Assign a name to the variable for identification and a default value to define the value you want it to take when no data is stored in the corresponding field.
4. Add Extra Actions
Add up to two links with alternative actions to the main one in your push notification. To do this, go to the Tools panel (3), open the Actions tab, and click Add Action.
You can add a title, URL, and icon to your action and enable the option to close the push when the contact clicks the action.
5. Translate the Content
In the preview, translation, and save panel (1), you can translate the notification into any desired language. To do so, click the (Translate) button.
In the popup window, click the dropdown menu and select the language to which you want to translate the web push.
Click Confirm for Connectif to automatically translate the content.
6. Preview the Final Result and Save
In the preview, translation, and save panel (1), you can see the final result of your push notification. To do this, click (Preview) and select whether you want to preview the full version or the compact version.
Once the design is finalized, click Save to save the changes to the notification.
Congratulations!
You have reached the end of the lesson.
Do you still have unresolved questions?
Remember that our Connectif specialists are available to assist you. To contact them, simply open a support ticket by clicking the blue “Help” button on your dashboard.
Keep Learning!
To fully harness the potential of your Connectif account, we recommend continuing with the following articles:
- Configure Web Push Notifications, to set up this communication channel and send these notifications.
- Push Subscription with Browser Notification, to launch the browser's push subscription notification without sending web content.
-
Mass Web Push Notification Campaign, to create a mass push campaign.
- Abandoned Cart Recovery Funnel, to activate a cart recovery strategy through push notifications.