On-Site Message

An on-site message is a type of notification that appears directly on your website while visitors are actively browsing. Unlike scheduled messages, it doesn’t get sent at a fixed time. Instead, it shows up instantly during the user’s session.

Common formats include:

  • Pop-ups (e.g., discount offers)
  • Yes/No prompts (e.g., quick surveys)
  • Banners (e.g., announcements or alerts)

No additional permissions are required to display on-site messages. They are ready to use as soon as you set them up.

🚧

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.
  • To display on-site messages, the setNavigation function must be called on every page navigation, unless you enable Initialize SDK on Load (see Advanced Settings below).
  • If the website is a Single Page Application, please send setNavigation function on every page navigation.
// Page navigation without extra information
dengage('setNavigation');

How to Enable Onsite Messaging

Go to Settings > Integrations > Applications > Create New (or select an existing Web Application) > Enable On-Site Messaging. For SDK setup, navigate to Advanced Settings > Enable “Initialize SDK on Load” if you want the SDK to trigger the setNavigation function automatically.

Screenshot

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.

Initialize SDK on Load (Advanced Settings): This option, available in Advanced Settings, automatically calls the setNavigation function when the SDK loads. If it is disabled, the setNavigation function must be called manually on each page navigation to use the On-Site Messaging channel.

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:

tagclassid
divcontainer
sectioncontainer
divcontainer container-small
divcontainer container-smallmain-container
divcontainerfooter-container

Direct query selectors of these nodes are will be like these:

querytarget count
.container5
div.container4
section.container1
.container.container-small2
#main-container1
#footer-container1

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.

Confirmation

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.