Store

Embed the whole store onto your site, toggle on Enable widgets in store management settings.

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 codes provided at the bottom for each widget types.

A read-only display of all the items in the store, with a optional CTA button to be included.

Simple set up: Include the iframe code anywhere on your platform!

Example:

<iframe 
    src="https://prod-widgets.returning.ai/store-widget/NjYzMZGE5ZTQx/open-widget" id="returningAiWidgetIframe" 
    frameborder="0" 
    width="100%" 
    height="100%">
</iframe>

No Authentication: All users who visits your site will be able to see the widget.

All store items can be seen regardless of permissions.

CTA button can be linked to any URL: default URL links users to the server.

CTA button appears at the product cards.

Button content and URL can be set up in the settings.

Example (Public widget):

Authenticate the users who sees the widget and users will be able to make purchases.

Requires more development effort:

When a user logs into your platform, send a request to get a Auth token, it will respond with a token that encodes the user identity.

URL: https://prod-widgets.returning.ai/store-widget/NjYzMzRiMDZlYGE5ZTQx/signin
Method: POST
Headers: {
    'returningai-api-key': '093ff339043953290cecb2514a705a6652c9b78',
    'email': '{email}',
    'Content-Type': 'application/json',
 }

Collect and save each user's token in the local storage as `returning-ai-widget-token

Example (fetch):

     fetch('https://prod-widgets.returning.ai/store-widget/NjYzMZGJkNGE5ZTQx/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)
      })

Example (axios):

    axios.post('https://prod-widgets.returning.ai/store-widget/NjYzMzRiMDZlGE5ZTQx/signin', null, {
    headers: {
        'returningai-api-key': '093ff333651d19fdd1205a6652c9b78',
        'email': '{email}',
        'Content-Type': 'application/json',
      }
   }).then((res) => {
   localStorage.setItem('returning-ai-widget-token', res.data.token)
})

Add Event listerner script to let the iframe get the saved token RETURNINGAI_WIDGET_TOKEN

Example:

 <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>

Add the iframe into the site's HTML code.

<iframe 
    src="prod-widgets.returning.ai/store-widget/NjYzMZGJkNGE5ZTQx" 
    allow="clipboard-write" 
    id="returningAiWidgetIframe" 
    frameborder="0" width="100%" 
    height="100%">
 </iframe>

Example (Authenticated widget):

Whitelisted domain(s)#

Customisation#

Public widget#

Authenticated widget#

Whitelisted domain(s)

Customisation

Public widget

Authenticated widget