Welcome to Embedded Messaging, the comprehensive tool for delivering rich, targeted content directly within your web application. This guide will provide you with a high-level overview of the core concepts and steps required to integrate Embedded Messaging into your site.

Initial Setup: Integrating the SDK

To get started, you must integrate the Optimove Web SDK into your website.

• Update Your Script Tag: Ensure the script tag on your website points to the v2 version of the websdk.
  • Example:
    HTML

    <script async src="https://sdk.optimove.net/v2/websdk/?tenant_id=<YOUR_TENANT_ID>&tenant_token=<YOUR_TENANT_TOKEN>"></script>

• Local Development: To test your integration, you will need to run a local web server and add localhost to your brand's domain mapping within your Optimove settings.
  • For a full walkthrough, see the SDK Setup & Local Development guide.

Using the SDK for Messaging

The SDK provides a simple and powerful API for managing messages.

• Identify the User: Call setUserId() with the identifier your site uses for the logged-in user. If the customer has aliases, use the alias, not the Optimove customer ID.
• Fetch Messages: You can retrieve all messages or filter for messages in specific containers.
• Manage Message State: Programmatically mark messages as read or unread.
• Report Engagement: Send metrics for clicks and other interactions to track campaign performance.
  • For detailed code examples, see theUsing the SDK for Embedded Messaging guide.

Advanced: Direct API Integration & Custom UIs

For implementations that require a completely custom UI, you can interact with the V2 REST API directly.

• V2 Endpoints:
  • [POST] /api/v2/embedded-messages/get: Fetches messages for one or more containers for a given user.
  • [POST] /api/v2/embedded-messages/report-events: Reports user interactions like read, clicked, and deleted events.
• Required IDs: All API calls require your tenantId and brandId. To fetch messages, you must provide either a customerId for a known customer or a visitorId for an anonymous visitor.
  • Customer aliases: If the customer has aliases, pass the alias as the customerId, not the Optimove customer ID. No messages are published under the original ID.
    • For details, see Supporting Visitors & Customers.
  • For complete technical details, see the Embedded Messaging API Reference.

Styling and Customization

The out-of-the-box UI components are delivered via a Shadow DOM to prevent style conflicts with your site. You can customize their appearance using CSS custom properties.

• Example:
  CSS

  :root {
      --optimove_inbox_header_background_color: #F10A69;
      --optimove_inbox_badge_background_color: #F10A69;
  }

  • For a full list of variables, see theStyling & Customization guide.