An on-site message is a type of web message where the notification is displayed within the website. It is not sent at a specific time but it is shown to users when users are using the app. Examples include popups, yes/no prompts, banners, and more. In order to show on-site messages, there is no permit requirement.
Important Notes
- Created onsite messages will be stored in D·engage backend and will be served to web SDKs.
- On-site messages on the D·engage platform is triggered by page navigation.
- For displaying onsite massages you just have to add
setNavigationfunction to every page navigation.- If the website is a Single Page Application, please send
setNavigationfunction on every page navigation.
// Page navigation without extra information
dengage('setNavigation');
How to enable onsite messaging
Settings > applications > Web Push App > Definition > "On-Site Messaging" enable click on
Minimum Interval For Fetching Messages: SDK will fetch messages for that user periodically and stores those messages in local storage. This determines the minimum required elapsed time before fetching the new messages again. (min 15 minutes)
Minimum Duration Between Displaying Messages: If there are multiple messages in the local storage waiting. Most of the time you don't want them to be shown every page navigation. This may disturb the user. So this determines the minimum required elapsed time before showing the next message from the queue.
Trigger On SDK Load: This will trigger setNavigation function automatically when the SDK loaded. If your website is not a single page application then you can use this option. By using this option you don't have to do any code changes to your website.
Inline Target Selector
Features
Search
Selector scans all HTML nodes in page and finds the ones that contains search word on their class or id. Then lists the optimized query selectors for the found nodes. Queries are optimised by prioritising id queries and using tag when adding tag to it lowers the result count.
Example
For example, when searched with ‘container’ word, selector finds 5 nodes like these:
| tag | class | id | |
|---|---|---|---|
| div | container | ||
| section | container | ||
| div | container container-small | ||
| div | container container-small | main-container | |
| div | container | footer-container |
Direct query selectors of these nodes are will be like these:
| query | target count |
|---|---|
| .container | 5 |
| div.container | 4 |
| section.container | 1 |
| .container.container-small | 2 |
| # main-container | 1 |
| # footer-container | 1 |
Initial(Auto)
When overlay is initialized, selector automatically searches for nodes with initial search word. Initial search tries 5 times in 5 seconds since some HTML nodes can be removed or added after the page load.
Manual
Manual search is the same process with initial search without retry. It only searches once on button click.
Node Highlight
When search is complete. Selector adds an overlay to all selectable nodes with blue transparent color. Color turns green for targets of the selected query. When mouse hovered on highlighted overlays, queries that targets those nodes are highlighted with breathing background color change animation.
Confimation
When clicked to Confirm Target button, selector sends a message to the Admin Panel with selected query and its target count. Then closes to site tab.