Web Messenger

Outcome

By the end of this guide you will know which Launch your AI option to use and how to install Web Messenger on your website.

Prerequisites

• You can sign in to EBI's AI Studio
• You have published your flows (recommended)
• You can edit your website's HTML, theme, tags, or page templates, or you have an engineering contact who can do it

Steps

1. Open the launch modal

1. In the top navigation, select Launch your AI.
2. In Code for your AI assistant, choose the option that matches your website:
   • AI assistant code
   • Squarespace site
   • Wordpress site
   • Shopify site
   • HTML website with Google Tag Manager
   • QR code

Do not share the generated code snippet publicly. It includes values that identify your assistant setup.

2. Choose the right launch option

3. Install with AI assistant code

Use AI assistant code when you can add the generated snippet to your website template.

1. Select AI assistant code.
2. Select the copy icon inside the code block.
3. Paste it into the HTML of the page where Web Messenger should appear.
4. If possible, place it just before the closing </body> tag.
5. Save or publish the website change.

4. Install on Squarespace

Use Squarespace site when the site is managed in Squarespace.

1. Select Squarespace site.
2. Select the copy icon inside the code block. The step heading says Copy the code snippet to your clipboard.
3. In Squarespace, open Settings.
4. Open Advanced.
5. Open Code injection.
6. Paste the snippet into the header area.
7. Save the Squarespace change.
8. Open the website and confirm Web Messenger appears.

5. Install on WordPress

Use Wordpress site when the site is managed in WordPress.

Recommended option:

1. Select Wordpress site.
2. Under Use our WordPress plugin, select View plugin.
3. Install and configure the plugin from WordPress.
4. Open the website and confirm Web Messenger appears.

Manual option:

1. Select Wordpress site.
2. Select the copy icon inside the code block. The step heading says Copy the code snippet to your clipboard.
3. In WordPress, open Appearance.
4. Open Theme file editor.
5. Paste the snippet into the appropriate theme file.
6. Select update or save for that file.
7. Open the website and confirm Web Messenger appears.

Only edit theme files if you are comfortable maintaining WordPress theme changes. A plugin or tag manager is usually safer for non-developers.

6. Install on Shopify

Use Shopify site when the assistant should appear on a Shopify page.

1. Select Shopify site.
2. Select the copy icon inside the code block. The step heading says Copy the code snippet to your clipboard.
3. In Shopify, open Pages.
4. Select the page where Web Messenger should appear.
5. Switch to HTML view with the HTML button in the editor.
6. Paste the snippet.
7. Save the page.
8. Open the page and confirm Web Messenger appears.

7. Install with Google Tag Manager

Use HTML website with Google Tag Manager when your website is already managed through Google Tag Manager.

1. Select HTML website with Google Tag Manager.
2. Select the copy icon inside the code block. The step heading says Copy the code snippet to your clipboard.
3. In Google Tag Manager, open Tags.
4. Select New.
5. Select Tag Configuration.
6. Choose Custom HTML.
7. Paste the snippet into the HTML box.
8. In Triggering, choose All Pages with the type Page view.
9. Select Submit.
10. Name and publish the tag.
11. Open the website and confirm Web Messenger appears.

8. Use the QR code

Use QR code when users should scan a code to open the assistant directly.

1. Select QR code.
2. In Download your QR code, select the download icon.
3. Add the QR code to the approved physical or digital material.
4. Scan the QR code with a phone.
5. Confirm the assistant opens and starts the expected experience.

Do not publish a QR code until you have tested it from a phone that is not signed in to EBI's AI Studio.

9. Send instructions to someone else

Use Send instructions via email when an engineer or website owner will install Web Messenger for you.

1. Select the launch option that matches the website.
2. Select Send instructions via email.
3. In Send instruction via email, enter the recipient's email address.
4. To add more than one recipient, enter an address and press Enter after each one.
5. Check the recipient list.
6. Select Submit.

Submit opens your email client with a prefilled email. EBI's AI Studio does not send the email directly. Check the recipients and message in your email client before sending.

10. Restrict allowed domains

If you want to stop the widget loading on unexpected sites:

1. In the top navigation, select Style.
2. Under Restrict to your domains (optional), add your domain(s).
3. Select Save and publish.

Verify

1. Open your website (incognito/private window recommended).
2. Confirm Web Messenger loads.
3. Ask 3-5 common questions and confirm you get the expected responses.
4. If you used Google Tag Manager, confirm the tag has been published, not only saved as a draft.
5. If you used QR code, scan it from a phone and confirm the assistant opens.

Common issues

• Web Messenger doesn't show: confirm your domain is added under Restrict to your domains (optional) and you selected Save and publish.
• It shows on the wrong site: add allowed domains and remove any incorrect ones, then Save and publish.
• It loads but answers are wrong: publish updated flows and/or add sources in Information sources.
• The Google Tag Manager change does not appear: confirm you selected Submit and published the container.
• The WordPress manual change disappears after a theme update: use the WordPress plugin or ask your website owner to add the snippet in a safer location.
• The QR code opens the wrong assistant: download a fresh QR code from the correct account and test it before printing or sharing it.
• You cannot find a copy button: use the copy icon inside the code block. Copy the code snippet to your clipboard is the step heading, not a separate text button.
• The email did not send: after Submit, check your email client. EBI's AI Studio prepares the email, but you still need to send it from your email account.

Related

• Style
• Publishing
• Testing
• Troubleshooting