This feature is available with the Business and Enterprise plans.

By default, the Noticeable widget stores what posts a user has read in the user browser (using local storage and not cookies). The drawback of this method is that a user who switches for instance from it's mobile device to a desktop computer will see again a widget highlight (e.g. red circle) for updates he has already seen or read. Cross-device synchronization prevents this problem.

Enabling Cross-Device Synchronization

To enable cross-device synchronization you need to perform 2 actions:

Send a token that uniquely identifies the user that is browsing your page (this can be the identifier of your user on authenticated pages). See how to use our JS SDK for this purpose:
https://help.noticeable.io/en-us/article/user-feedback-1wcb2uy/

Add the attribute sync to the Noticeable widget element:
<noticeable-widget id="widget" access-token="YOUR_ACCESS_TOKEN" project-id="YOUR_PROJECT_ID" sync>
<a href="#">What's new</a>
</noticeable-widget>


Here is a full code example:

https://glitch.com/edit/#!/noticeable-widget-cross-device-synchronization

and a live sample:

https://noticeable-widget-cross-device-synchronization.glitch.me

Single Page Application

If your web app is a SPA, then you don't know the identity of your user before the app is loaded. In that case, you need to load all Noticeable scripts after you have identified the user on your page. Here is a code sample:

var noticeableSdkScript = document.createElement('script');
noticeableSdkScript.async = true;
noticeableSdkScript.src = 'https://cdn.noticeable.io/v1/noticeable-sdk.js';
noticeableSdkScript.onload = function () {
Noticeable.user.set({
id: "hUeUm4nErJOloKoNBlua", // the ID must use alphanumerically characters only
email: "john.doe@company.com", // optional
name: "John Doe" // optional
});

var noticeableWidgetScript = document.createElement('script');
noticeableWidgetScript.async = true;
noticeableWidgetScript.src = 'https://cdn.noticeable.io/v1/noticeable-widget.js';
document.head.appendChild(noticeableWidgetScript);
};
document.head.appendChild(noticeableSdkScript);
Was this article helpful?
Cancel
Thank you!