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

Select phone number
  • You can customize your widget “WhatsApp button text” and your “pre-filled message”. Also select to Include your customer’s current page URL & Chat ID when the customer sends a message. Screenshot2025 09 11135835 Pn
Fill in “WhatsApp button text” and “pre-filled message” and click checkbox

​
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”

​
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>
⌘I