Guides
Start typing to search…

Getting Started with Embedded Messaging

📘

For a comprehensive, step-by-step implementation guide and interactive component examples, please visit our Embedded Messaging Storybook.

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

Using the SDK for Messaging

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

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

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.

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: 
    :root {
    --optimove_inbox_header_background_color: #F10A69;
    --optimove_inbox_badge_background_color: #F10A69;
}

Updated 3 days ago