Configuring App Inbox for Websites

Setting up App Inbox for websites includes:

1. Getting authentication token.
2. Script installation and initialization.
3. Integration of a widget displayed on the site.

📘

Note

App Inbox functionality works only for users authorized on the site.

Getting Authentication Token

Send the request from your backend to Reteno API to receive the authentication token (authToken). Authenticate the request using one of the methods specified in the API instructions, for example, using an API key.

The request has to contain the known contact fields: email, phone, externalCustomerId (at least one field is required). Those fields are used for searching a contact in Reteno. Afterward, the script uses authToken in requests to the Reteno server.

You can find additional information about managing contacts in API methods for adding contacts.

📘

Important

The token can become invalidated at any moment for security considerations, so you get it more than once. The script renews the token automatically by calling getAuthTokenCallback. If a contact is not in the Reteno system, the token is not returned, and the following response comes back instead:

{
  "token": ""
}

Script Installation and Initialization

Install and initialize the script on your frontend. Transmit getAuthTokenCallback in the parameters. This shall have the function calling your backend and returning the token.

If you have installed the Reteno script to work with web tracking, forms and recommendations, you don’t need to reinstall it. Just add parameters for App Inbox to the initialization call.

Example:

eS('init', {APP_INBOX: true}, {getAuthTokenCallback: () => yourImplementationOfAuthCallback(), language: 'en', });

📘

Important

Call the 'init' initialization command one time at every page loading.

If you have not installed the script before, contact the Reteno support team to get it, indicating that you need it for App Inbox.

You can get the script by yourself in the Settings → Web Tracking section.

You can learn how to set up a web tracking code here.

Important: Modify the call of the 'init' command in the script generated in the Web Tracking section as follows: instead of

eS('init')

it has to be

eS('init', {APP_INBOX: true}, {getAuthTokenCallback: () => yourImplementationOfAuthCallback(), language: 'en', });

Example of a script with initialization:

<script> !function (t, e, c, n) {var s = e.createElement(c); s.async = 1, s.src = 'https://statics.esputnik.com/scripts/' + n + '.js'; var r = e.scripts[0]; r.parentNode.insertBefore(s, r); var f = function () {f.c(arguments); }; f.q = []; f.c = function () {f.q.push(arguments); }; t['eS'] = t['eS'] || f; }(window, document, 'script', 'UUID'); </script><script>eS('init', {APP_INBOX: true}, {getAuthTokenCallback: () => yourImplementationOfAuthCallback(), language: 'en', });</script>

Parameters of the Object Passed to Reteno Function

Integration of App Inbox Widget

To integrate the widget on the site, the user has to provide to Reteno:

• CSS selector.
• Insert type position relative to other element(s) (insertAdjacentHTML method is applied).

Before the setup, contact Reteno to request a bell icon and notification center that match your design.

Widget Customization

You can provide the bell button design as an SVG file. Inline styles can be applied to notification card elements, including the image, title, content, button, and date. Inline styles also let you arrange these elements and use variables from your website.

By default, the notification center is positioned relative to the bell button. If needed, you can set a fixed position relative to the viewport. The background layer displayed when the notification center opens is configured separately upon request.

The following widget parameters cannot be changed:

• element states, including hover and read/unread states;
• system placeholders;
• date format;
• font;
• widget structure, including the set of elements, pseudo-classes, and pseudo-elements.

To implement your own App Inbox design on a website instead of using the standard widget, follow Configuring App Inbox for Mobile Apps. The integration approach described there applies to both mobile apps and websites.

📘

Note

App Inbox setup is not fully self-service. The client-side part of the setup is adding your authentication callback (yourImplementationOfAuthCallback) to the tracking script initialization. Displaying the App Inbox bell icon and notifications is enabled by the Reteno support team — after completing the client-side step, contact support to finish the setup.