Setting Up and Publishing Your Chat Widget
Your Re:amaze chat widget (also referred to as the Shoutbox) is one of the most powerful tools for engaging with customers directly on your storefront. Customizing it to match your brand's look and feel ensures a seamless experience for your customers from the moment they reach out. Re:amaze gives you full control over the widget's appearance, behavior, and the information you collect from customers, including custom text fields, dropdowns, checkboxes, and more.
You can view a video walkthrough of the widget builder, here.
Building your chat widget
To get started, go to Settings > Chat Widgets and select + New Chat Widget. This will launch the chat widget builder, which walks you through the setup process step by step.
Choose your widget type and brand. Select the type of chat widget you want to build and, if you manage multiple brands, choose which brand it belongs to. You can also choose whether the widget should be available on desktop, mobile, or both.
Set your widget's appearance. Choose where the widget will appear on your website, along with its theme color, icon, and icon size. We recommend using Brand Faces rather than a Brand Avatar to give your widget a more personal, human feel.
Configure greetings and quick responses. Enable a greeting to welcome customers when they open the widget. You can also add Quick Responses, which are pre-written questions and answers that help customers get answers faster.
Select a contact mode. Choose the contact mode that best fits your business. You can configure the widget to only ask for a customer's name and email when a conversation is escalated to a live agent.
Add custom fields. Custom Fields allow you to collect additional information from customers before they submit an inquiry. To learn more, check out this article.
Add FAQ search and order status lookup. The final step lets you add an FAQ search and order status lookup directly to your widget, giving customers the ability to self-serve before reaching out. When you're done, select Save.
Once you're finished going through the builder, you can automatically publish The Chat Widget to your website with our One-Click Publishing for Shopify. No coding necessary!
Manually adding your Embed script
Alternatively, add the widget manually. Re:amaze provides a JavaScript embed script you can add directly to your site's code.
To get started:
In the Manual Publishing section, select View Instructions to access the embed script. You can copy it directly from there, or select Send Code by Email to have it sent to you.
In your Shopify account, go to Online Store and navigate to the Themes page. select the three dots next to the Customize button and select Edit Code.
Open theme.liquid to access the main template file. Next, you'll want to paste the script right above the <head> tag. Make sure to select Save once you're done.
Check your storefront to confirm the chat widget is appearing correctly.
NOTE: You can also integrate Re:amaze with Google Tag Manager (GTM) for easy auto-publishing of the Shoutbox. We recommend using either our native Shopify One Click Publishing OR Google Tag Manager auto publishing, but not both. GTM can also help make adding, deleting, and editing the Shoutbox much faster by skipping the copying and pasting part in theme.liquid.
What went wrong? (Optional)