Customizing and Publishing the Re:amaze Chat Widget
Customizing your Chat Widget (Shoutbox) to match your store's look is important for a seamless brand experience. Before you start, think about the extra information you might need from your customers. Re:amaze offers options like custom text fields, dropdowns, checkboxes, and more to tailor your Shoutbox effectively. To see a video tutorial on customizing the Shoutbox, click here.
To start building your Shoutbox, go to Settings > Chat Widgets and click "+ New Chat Widget." From here, you will be taken through a number of steps with the chat widget builder.
- First, decide which kind of chat widget you'd like to build and which brand it's for (if you manage multiple brands) You can choose to have your widget available on both desktop or mobile devices.
- We recommend using Brand Faces over using your company's Brand Avatar to provide a personal and human experience with your chat widget.
- On the next page you can choose where on your website the widget will be positioned, its theme color, icon and icon size, etc.
- You can also select the "Enable Greeting" option to add and customize a greeting for your customers. You can also provide pre-written questions and answers by added Quick Responses. *
- Continue with the builder and select the contact mode that best fit your business. With this step you can also add Custom Fields to your widget. These fields allow you to request extra information from customers before they submit their inquiry. To learn more about Custom Fields, check out this article.
- The last step of the builder will give you the option to add an FAQ search and order status lookup to your widget. Once you're done, click "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, you can manually publish your Chat Widget with the full javascript Re:amaze provides.
- Click "View Instructions" in the "Manual Publishing" section to access the script. This will provide the script which you can copy from here, or you can have the script sent to you by clicking "Send Code by Email."
- Navigate back to your Shopify account and click "Online Store." On the "Themes" page,click on the three dots located next to the "Customize" button and select "Edit code" from the dropdown options.
- Click on "theme.liquid" to access the main template file. Next, you'll want to paste the script right above the
<head>tag. Once you've pasted the script it should look something like the following. Make sure to click on "Save" once you're done.
- Head over to your store's website and verify that the new Shoutbox is appearing.
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.