Skip to main content
Integrating a chat widget into your store with bitChat makes it easy for customers to reach you directly. Whether you’re using Shopify or another platform, this guide will show you how to set up, customize, and optimize your chat widget for a seamless customer support experience.

​
Step 1: Navigate to bitChat

​
Step 2: Enable bitChat on Shopify Theme

  • Click “Enable Now” to start configuring your chat widget. Screenshot2025 09 11135746 Pn
  • Click “Enable Now”
  • In the Shopify theme, search “bitChat” and click to enable it. Then, click on the “save” button located in the top-right corner of the page to save your changes Screenshot2025 09 11135800 Pn
  • Search “bitChat” in Shopify theme, click to enable it and “Save”

​
Step 3: Configure Contact Information

​
Step 4: Customize Power Message

  • Enable toggle “Power message” to display a timed message above your chat widget. Screenshot2025 09 11135842 Pn
  • Enable toggle “Power message”
  • Fill in the “Header”, “Description”. Screenshot2025 09 11135849 Pn
  • Fill in the “Header”, “Description”
  • Set timing and pick the message color. Screenshot2025 09 11135909 Pn
  • Set timing and pick the message color

​
Step 5: Set Up Quick Responses

  • Enable the “Quick response” toggle. Screenshot2025 09 11140512 Pn
  • Enable the “Quick response” toggle
  • Enter trigger button text and select the “chatbot” to trigger specific responses. See How to Create A Chatbot Flow for the details. Screenshot2025 09 11140521 Pn
  • Enter trigger button text and select the “chatbot”

​
Step 6: Optimize Your Social Media Chat Widget

  • Enable the “Social media” toggle desired to reach you through their preferred social media platforms. Screenshot2025 09 11140530 Pn
  • Enable the “Social media” toggle
  • Insert your social media account and click “Save”. Screenshot2025 09 11140537 Pn
  • Insert your social media account and click “Save”
  • To embed chat widget to your code without integration with Shopify, enter this embed code: 
<link rel="stylesheet" href="https://cdn1.bitbybit.studio/bitbybit/static/bitChat_widget/widget.css" />
  • Then, copy and paste the code below before the start of the last element in the <body> tag
<script src="https://cdn1.bitbybit.studio/bitbybit/static/bitChat_widget/widget.js"></script><script>  BBBWidget.init({  "showQuickResponse": false,  "quickResponsesData": [],  "themeColor": "#262627",  "widgetText": "Need Help?",  "radiusType": "circle",  "widgetIconType": "whatsapp",  "position": "right",  "storeLogo": "https://bbb.sgp1.digitaloceanspaces.com/bitbybit/files/563/Untitled design 4-2556.png",  "storeName": "bitbybit",  "storeDescription": "How we can help?",  "size": "small",  "showCard": true,  "widgetColor1": "#262627",  "widgetColor2": "#008069",  "widgetColorType": "solid",  "social": {    "socialOrders": [      "email",      "instagram",      "x",      "facebook",      "tiktok"    ],    "values": {      "instagram": {        "enabled": false,        "value": ""      },      "facebook": {        "enabled": false,        "value": ""      },      "email": {        "enabled": true,        "value": "info@bitbybit.studio"      },      "x": {        "enabled": false,        "value": ""      },      "tiktok": {        "enabled": false,        "value": ""      }    }  },  "socialColorType": "custom",  "socialColorCustom": "#232323",  "powerMsgEnabled": false,  "powerMsgHeader": "Help center",  "powerMsgDescription": "How can we help?",  "powerMsgDisplayDelay": "10",  "powerMsgDisplayFrequency": "every_24_hours",  "powerMsgColor": "default",  "whatsappButtonText": "WhatsApp Support",  "whatsappPhone": "6281514231000",  "whatsappPrefilledText": "Hello bitbybit team, I need some assistance: {{url}}"}  );</script>