Create a bubble that can appear anywhere on your web shop.

1. Configure the bubble

  1. Go to Automations > Chat-in bubbles
  2. Select Add new bubble

Teaser Message tab

The teaser message will appear to draw attention to the bubble. Configure the optional teaser message by:

Untitled

  1. Update the teaser message
  2. Update the text color and the color of the background
  3. Determine when the message will appear by updating Open teaser message after [x] seconds
  4. Determine how long it appears for by updating Teaser message duration [x] seconds
  5. Preview how it will appear

Appearance tab

Untitled

  1. Upload your logo (or another brand element) as the bubble image
  2. Adjust the background colour, as well as the bubble size and position on the page

<aside> 💡 The preview on the right is real-time so you can see exactly how it’ll be displayed in your storefront!

</aside>

Content tab

Here you’re configuring what appears after you click the bubble.

Untitled

  1. Adjust the text, colours and bubble text (keep things short and simple)
  2. Adjust the CTA colour and text
  3. Enter your WhatsApp business number (that’s assigned to this charles instance)
  4. Add the Chat-in message → this is the message that’s pre-filled in WhatsApp when the visitor clicks the CTA

<aside> 💡 Connect an ‣ that’s triggered by the Chat-in message (see below)

</aside>

Target tab

Define where the bubble should appear on your site.

Untitled

  1. Define on which devices it appears - mobile, desktop or both
  2. Define on which page - whether all or on specific pages
    1. If specific pages, add them with the Add new Page and entering the path
  3. Define if the bubble will be visible at all times or only during office hours
  4. Select Save Changes

2. Connect an opt-in flow

Creating an opt-in flow.mp4

See more:

Ordering

If you have multiple enabled bubbles, chances are some will appear on the same page. For this case, we’ve implemented simple ordering that lets you set the priority.

If there are multiple bubbles on the same page - the active bubble with the highest priority will be displayed, while the others will not.

For example, given three bubbles in the following order:

  1. Bubble A: target set to example.com
  2. Bubble B: target set to example.com/products/
  3. Bubble C: target set to **example.com/products/fashion/

If a user visits example.com/products/fashion/t-shirts all 3 bubbles are valid to display. In this example, only Bubble A would display.

Need inspo? Check out what our clients are doing

Bubble example-3.png