SDK Setup & Local Development

This guide walks you through setting up a local development environment to test your Embedded Messaging integration from scratch. Following these steps will ensure your machine is correctly configured to communicate with the Optimove SDK.

1. Create a Test Page

First, create a basic HTML file to serve as your test page.

  1. Create a new file named index.html.

  2. Add the following boilerplate code:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Embedded Messaging Test</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
    </body>
    </html>

2. Run a Local Web Server

To load the Optimove SDK, your page must be served from a web server. The simplest way to do this is using Python's built-in HTTP server.

  1. Open your terminal or command prompt.

  2. Navigate to the directory where you saved index.html.

  3. Run the following command:

    python3 -m http.server 8092
  4. Open your web browser and go to http://localhost:8092/. You should see your "Hello, World!" page.

3. Add the Optimove SDK

Now, add the Optimove Web SDK script tag to your HTML file. This will load the necessary code to interact with Embedded Messaging.

  • Add the <script> tag inside the <head> section of your index.html file. Remember to replace <YOUR_TENANT_ID> and <YOUR_TENANT_TOKEN> with your actual credentials.

    <!DOCTYPE html>
    <html>
    <head>
        <title>Embedded Messaging Test</title>
        <script src="[https://sdk.optimove.net/v2/websdk/?tenant_id=](https://sdk.optimove.net/v2/websdk/?tenant_id=)<YOUR_TENANT_ID>&tenant_token=<YOUR_TENANT_TOKEN>"></script>
    </head>
    <body>
        <h1>Hello, World!</h1>
    </body>
    </html>

4. Configure Domain Mapping

For the SDK to initialize correctly on your local machine, you must map localhost to your brand in the Optimove settings.

  • Add localhost to the list of domains that resolve to your brand.

    Setting localhost to map to your brand

    Setting localhost to map to your brand

📘

Caching and Verification

Due to caching, it can take up to 10 minutes for the new domain mapping to take effect.

You can verify that the mapping is working by checking your browser's Developer Tools. Look for a successful network request to a config URL. If the call fails, the domain mapping may not have propagated yet.

If the call is successful, or if you don't see it, check the Application tab for cached config data in Local Storage.

5. Test Your Setup

Once the SDK is loaded and configured, you can perform a simple test to ensure the out-of-the-box UI components work.

  1. Open your browser's JavaScript console.

  2. Execute the following command to show the inbox UI:

    optimoveSDK.API.Inbox.showInbox();

    This should display the Web Inbox component on your page, which will initially be empty. This confirms that your local setup is correct and ready for you to start developing with Embedded Messaging.

    Test page with inbox opened via a JavaScript call

    Test page with inbox opened via a JavaScript call