Embed the whole milestone page on your site, toggle on Enable Widgets
on the milestones setting page.Whitelisted domain(s)#
No domains added → The widget can be embedded and used on any domain.
Domains added → The widget can only be embedded and used on the listed domain(s).
Customisation#
Use the widget preview at the bottom to track the color changes.After configuring the appearance of the widget, copy the code provided.Each user has their own milestone progresses, thus, only authenticated widgets are available for social quests. Users will be able to interact and see their progress via the widgets!1.
Collection and saviong of each user's token
fetch('prod-widgets.returning.ai/milestone-widget/NjYzGE5ZTQxM5Mzg2N2VmMWM3MDlhNi82OGFkMTYyYTAzOTM4NjdlZjFjNzA5YTY=/signin',
{
method: 'POST',
headers: {
'returningai-api-key': 'df09a52de262f1f802950815864',
'email': '{email}',
'Content-Type': 'application/json',
}
}).then((res) => {
res.json().then(data => {
localStorage.setItem('returning-ai-widget-token', data.token)
})
}).catch((err) => {
console.log(err)
})
2.
Add Event listerner
to get the token
<script>
window.addEventListener('message', (event) => {
if (event.origin === 'https://prod-widgets.returning.ai') { // Check origin for security
const { type } = event.data;
if (type === 'RETURNINGAI_WIDGET_TOKEN') {
const value = localStorage.getItem('returning-ai-widget-token');
// Send the value back to the parent window
event.source.postMessage({ type: 'RETURNINGAI_WIDGET_TOKEN', value
}, event.origin);
}
}
});
</script>
3.
Add the iframe
into the site's code
<iframe src="prod-widgets.returning.ai/milestone-widget/NjYzGE5ZTQxM5Mzg2N2VmMWM3MDlhNi82OGFkMTYyYTAzOTM4NjdlZjFjNzA5YTY" allow="clipboard-write" id="returningAiWidgetIframe" frameborder="0" width="100%" height="100%"></iframe>
Modified at 2025-09-10 03:56:10