Build and install a chat widget on a Shopify store

What you'll need

  • An installed Shopify store integration

Step one: Create a new chat widget

circle-info

Make sure you are in the Customer Service section of your workspace before you start.

You can check this by clicking the workspace name in the top left-hand corner of your screen and selecting Customer Service.

  1. Go to Preferences > Chat widgets.

  2. Click Create new chat widget.

  3. Name your chat widget.

  4. Select the Default Language from the drop-down.

  5. Click Ecommerce platforms.

  6. Select your Shopify store from the drop-down.

  7. Click Create new chat widget.

Step two: Style your chat widget

  1. Add styling, branding, display rules, and additional channels to your chat widget.

chevron-rightBrandinghashtag

In the Branding section, you can configure the following:

  • Brand color

  • Organization logo

  • Dark mode organization logo

  • Font

  • Background type

  • Desktop and mobile display

chevron-rightTargeting and behaviorhashtag

In the Targeting and behavior section, you can configure the following:

  • Allowed domains

  • Specific page paths

  • Country visibility

chevron-rightContenthashtag

In the Content section, you can configure the following:

  • Logo display

  • Header title

  • Header description

  • Footer display

  • Disclosure

  • Launch text and placement

chevron-rightBlockshashtag

In the Blocks section, you can configure the following:

  • Add additional channel buttons

  1. Click Publish.

Step three: Enable your chat widget on your Shopify store

  1. Go to Manage integrations.

  2. Find your Shopify store.

  3. In the Config tab, click Enable sign-up forms. You'll be sent to Shopify.

  4. In the App embeds panel, switch the Bird CRM toggle to off then on. There should be a message at the bottom of your screen that says 'Bird CRM: Marketing activated'.

  5. The chat widget launcher should now be visible in the bottom right-hand side of your store preview in Shopify.

  6. Click Save in the top right-hand corner.

  7. Open your store. The chat widget should be visible.

Last updated

Was this helpful?