Sending In-Browser Messages

If you've added your website to Iterable and set up Iterable's web SDK, you can start sending in-browser messages (in-app messages that target a website). This guide describes how to send in-browser messages from a stand-alone campaign and from a journey.

# In this article

# Required permissions

To send an in-browser message, you will need the Manage and Launch Campaigns permission for the In App message medium.

# Sending an in-browser campaign

# Set up the campaign

First, set up the campaign:

1. In Iterable, navigate to Messaging > Campaigns.

2. Click New Campaign. You'll see the New Campaign page:

   

3. Give your campaign a name. Choose a conversion metric if you need one.

4. For Campaign type, select Triggered or Blast, depending on your need. In this example, we'll send a triggered campaign.

5. For Message medium select In-App (in-browser messages are in-app message campaigns that target a website).

6. To send the campaign to a particular set of websites and/or mobile apps (instead of all of them), use the Destination dropdown:

   

   • All mobile apps — Sends the message to all mobile apps you've integrated with Iterable (even if you haven't added them to the Settings > Apps and websites page).

   • All websites — Sends the message to all the websites you've integrated with Iterable (by adding them to the Settings > Apps and websites page and installing Iterable's Web SDK or making manual API calls).

   • Everything — Sends the message to all apps and websites (combination of the above two options).

   • Custom — Sends the message to specific apps and websites of your choosing.

7. Select an In-app display priority to help determine the relative display order of this message.

8. Click Continue to templates.

9. Choose your template. You can select an existing template and click Use selected template or click Start from scratch to create a new one. If necessary, choose a template editor when prompted.

   TIP

   Feel free to use a template from a previous in-app campaign. In-app templates originally sent to mobile apps should generally work for in-browser messages, too. However, always run a test before sending a campaign to your customers.

# Configure the template

Next, configure the template for your in-browser message:

1. Click Edit design to update the message template. In the template's content, remember to provide a button or a link that users can click to take action.

   Clicking a link in an in-browser message doesn't close it. To close it, users can click a close button that's autogenerated by Iterable's web SDK, click off of the message, or click a button or link that targets iterable://dismiss.

   However, in the Safari web browser, Iterable's SDK does not support autogenerated close buttons, iterable:// links, or action:// links. To close a message, Safari users can click outside of the message.

   If your in-app message includes content to display (not just raw JSON), you must include a link. Website users can close in-browser messages by clicking outside the message, but this isn't true when viewing in-app messages in mobile apps. Since the same in-app message campaign can be sent to websites and mobile apps, a link or button gives mobile users a way to take action or close your message.

   For more information about limitations with Safari and Iterable's web SDK, see the SDK's GitHub repository.

2. For Message format (in the Details section), select the type of content you'd like to include with the message.

   • Content, styles, and layout (HTML) — Include the message, as designed in the editor on this page.

   • Raw data (JSON) — Include only the JSON data defined in the Raw data (JSON) input (in the Details area). Your website can use this JSON data however necessary (for example, to build a custom message display or trigger custom functionality).

   • Everything: content, styles, layout, and raw data (HTML & JSON) — Include the message, as designed in the template editor on this page, and the JSON entered in the Raw data (JSON) input (in the Details area).

   • In the Details area, select other configuration options—a position, animations, a background overlay, an expiration time, etc. These options are compatible with mobile in-app messages and in-browser messages.

3. To preview your template, click Preview. On the preview page, use the Web / App toggle to change how the message displays. Click the play button (below the previewer) to view the message's entrance and exit animations, too.

4. When you're done editing the template, save it.

# Send a test message

Now that you've built and saved your template, try sending a test message. To do this:

1. Click Send Test Message, and choose one of the options (for example, To another address).

2. Enter the email address of a user you can sign in with on the website that will receive the message.

3. On your website, sign in as the same user to which you sent the message. Refresh the page, and the message should display:

   

   If you don't see the message, make sure that you're:

   • On your website, you're signed in as the right user.

   • Your server is correctly generating JWT tokens and passing them back to the SDK. For help verifying this, ask your engineering team for some help. Try using your browser's developer tools to inspect the network calls being made by your browser.

4. To close the in-app message, click on the close button (if you added one) or somewhere off the message.

# Send the campaign

After creating your template and testing it to make sure that it's working, you can send it just like any other campaign, triggered or blast.

# Send an in-browser campaign from a journey

You can also send an in-browser message campaign from a journey. To do this, open up your journey and add a Send In-app tile:

To configure your send tile, open it up, give it a name, and click Choose a template (or, if you don't select a template, you can create a new one after you click Create campaign)

After attaching a template to the campaign, use the Destination dropdown menu in the tile configuration to select which mobile apps and websites should receive the campaign:

After you finish configuring the tile, save it. Then, publish your journey when you're ready to do so.

# Next steps

Next, learn about Events and Metrics for In-Browser Messages.