Deployment Options

Web Inbox is a channel for displaying personalized messages to users via a widget on your website. There are two primary ways to consume this channel:

• Using the 'out of the box' Optimove UI widgets (launcher badge and inbox)
• API-only Integration (using your own component)

It is possible to take a hybrid approach, such as using the Optimove Inbox widget while writing your own launcher button/menu item/etc.

Out of the Box

This approach involves using the Optimove UI widgets:

• A 'Launcher Badge' that sits in the Shadow DOM floating above your web page
• An Inbox component that pops out from the left or right of the page. This component also exists in a Shadow DOM and floats above the page.

Both components can be styled through CSS Variables - see Styling Web Inbox.

Initializing the Out of the Box Widget

🚧

Initialization will be simplified after Beta

This section is subject to change during the beta period. Specifically, the requirement to provide tenantId, brandId, etc., will be removed as the main Optimove SDK already knows this information.

When?

There are two primary places on your site where you may want to initialize the inbox:

• On Page Load (Works best when using the Launcher Badge)
• On Demand

In both cases, you will need to reference the Web Inbox SDK:

<script src="https://optimove-sdk-web.optimove.net/optimobile-inbox-web-bundle.js"></script>

To initialize On Page Load, create an event handler:

<script>
    window.addEventListener('load', function () {
        // Initialization code here
    });
</script>

To initialize On Demand, create a function:

<script>
    function showInbox() {
        // Initialization code here
    }    
</script>

How?

The following code will create a new Inbox Widget (and badge if useBadge is true). Add this code to the method you wrote above (see When).

You will need to pass your Customer Id before showing the inbox. If you have the Optimove Web SDK, this is just a matter of calling optimoveSDK.API.getUserId().

var sdk_id = yourMethodToGetUserId();

// If you already have the Optimove Web SDK, you can instead use:
// var sdk_id = optimoveSDK.API.getUserId()

var config = {
    tenantId: '<YOUR_TENANT_ID>',
    brandId: '<YOUR_BRAND_GUID>',
    region: '<YOUR_REGION>',
    apiVersion: 'v1',                    
    badgeImage: '',
    badgeInjectionAtId: '',
    defaultMediaImage: '',
    position: 'right',
    useBadge: true,
};

var inbox = new OptimobileInbox(config);
inbox.setCustomerId(sdk_id);

// If you want to open the inbox right away (e.g., if not using the Badge Launcher)
inbox.showInbox();

You can adjust the following variables:

📘

Styling

The inbox can be styled through CSS variables, see Styling Web Inbox.

API Integration

If you have an existing notifications widget or want to create your own, you can integrate directly with the Optimove Web Inbox API.

To do this, you will need the following information, which can be provided by your CSE:

• Optimove Tenant Id
• Optimove Brand Id (this will be a GUID, e.g., '9abb8d6d-62ed-42d1-97d1-c82d15f9c1fc')
• Region
  • EU customers should use the region string 'eu-central-2'
  • US customers should use the region string 'us-east-1'

After the channel has been provisioned, you can start consuming the REST API:

• EU API (Swagger)
• US API (Swagger)

As an alternative to consuming the REST API directly, you can follow this guide to generating a client library that wraps the REST API in your project's language.