How to add the chat widget to your Shopify store

Follow these steps to install the Commslayer chat widget on your Shopify store.

1. Open Inboxes and click Add inbox

1. Log into your Commslayer account.

2. Click Settings in the left-hand menu.

3. Navigate to Inboxes.

4. Click the Add inbox button in the top-right corner.

2. Choose the Chat widget channel

1. Select Chat widget from the list of channels.

3. Create your inbox

1. Select the Store this inbox will be associated with.

2. Fill in the Inbox name, Welcome heading, and Welcome tagline under Copywriting.

3. Customize the widget under Branding. Upload a logo and choose a widget color.

4. Optionally configure Quick help links, Pre-chat form, Business hours, and CSAT surveys.

5. Click Create inbox at the bottom of the page.

4. Add agents

1. You'll be prompted to add agents. These are the team members who see and answer the chats in this inbox.

2. Select agents from the dropdown and click Add agents to confirm.

Note: As an administrator, add yourself as an agent to each inbox you create if you need access to all messages.

5. Enable the chat widget on your store

1. After adding agents, you'll see the Enable chat on your store screen.

2. Your chat widget won't appear on your store until you enable it in Shopify.

3. Click Enable in theme editor. This opens the theme editor of your published theme in Shopify.
   

4. In the theme editor, go to the App embeds tab in the left sidebar.

5. Find Commslayer chat widget and toggle it on.

6. Click Save in the top-right corner of the theme editor.

6. Verify the chat widget

1. Open your Shopify storefront (live or preview mode).

2. Look for the Commslayer chat icon in the bottom corner of the page.

3. Send a test message to confirm everything is working correctly.

7. Let the AI agent answer chats (optional)

• Go to AI agent → Settings. The page is shown to administrators.

• Click Select inboxes and pick your chat inbox.

• Switch on Enable AI agent and click Update settings.

• To keep the AI agent out while your team is online, switch on Pause AI when agents are online for that inbox. The switch shows once Enable AI agent is on.

While the AI agent handles a chat, the chat is listed under AI agent → Open in the Views section of the sidebar, not in the chat inbox. It moves to the chat inbox when the AI agent hands it over or a teammate replies.

You're all set!

Your chat widget is now live on your Shopify store. Messages from customers appear in your Commslayer inbox. If the AI agent is on for this inbox, they appear under AI agent → Open first.

Common problems#

The chat icon doesn't show on my store

Check these in order.

1. The app embed is on in the theme you are looking at. In Shopify, go to Online Store → Themes, click Edit theme (or Customize) on the theme, open App embeds, switch on Commslayer chat widget and click Save. App embeds are set per theme. A draft theme needs its own switch, and so does a new theme you publish later.

2. The chat inbox points to the right store. In Commslayer, go to Settings → Inboxes, click Manage on the chat inbox and check the Store card.

3. Send the widget's settings to your store again. On the same page, change something in the Branding card, for example the Widget bubble launcher title, and click Save. Saving a change there sends the widget's settings to your store again.

4. Nothing in your theme hides it. Search your theme code for commslayer-widget-toggle. An element with that ID hides the chat icon on purpose. See How to hide the chat widget on specific pages.

5. Your browser isn't showing an old copy of the page. Open your store in a private window or on another device.

You don't need an agent in the inbox for the icon to show.

If the icon still doesn't show, contact support from the chat inside the app. Send your storefront address and say which theme you are looking at.

I have more than one chat inbox for the same store

A store shows one chat widget. If you created a second Chat widget inbox for the same store, the store uses the inbox that was created or saved last. To make the store use the other one, open that inbox, change something in the Branding card and click Save.

Don't delete a chat inbox to fix a widget problem. Deleting an inbox removes all its conversations.