Installation

Overview

Slack Bubble lets website visitors chat directly with your team in Slack through a lightweight website widget.

Installation takes only a few minutes and requires:

1. A Slack workspace
2. Permission to install Slack apps
3. Access to your website's HTML or tag manager

Step 1: Install Slack Bubble in Slack

1. Open the Slack Bubble installation page.
2. Click Add to Slack.
3. Select the Slack workspace where you want to receive visitor messages.
4. Review the requested permissions.
5. Click Allow. After installation, Slack Bubble will be connected to your workspace.

Step 2: Create a Website Widget

1. Open the Slack Bubble dashboard.
2. Navigate to Widgets.
3. Click Create Widget.
4. Configure:
   • Widget name
   • Website domain(s)
   • Welcome message
   • Team members who should receive conversations
5. Save the widget. Slack Bubble will generate a unique Widget ID and installation snippet.

---

Step 3: Add the Widget to Your Website

Copy the installation code from the dashboard and paste it before the closing </body> tag on every page where you want the chat widget to appear. Example:

<script
  src="https://slack-bubble.com/bubble.js"
  data-bubble-id="YOUR_WIDGET_ID"
  data-bubble-color="#6b21a8"
  data-bubble-color-dark="#6b21a8"
  data-bubble-dark="auto"
  data-user-name="User Name"
  data-user-email="[email protected]"
  data-user-external-id="USER_EXTERNAL_ID"
  data-user-signature="MD5(USER_EXTERNAL_ID + SIGNATURE_SECRET)"
></script>

Replace YOUR_WIDGET_ID with your actual Widget ID.

Step 4: Verify the Installation

1. Open your website in a new browser window.
2. Confirm the chat widget appears.
3. Start a test conversation.
4. Verify the message is delivered to Slack.
5. Reply from Slack and confirm the response appears in the website chat.

Step 5: Configure Team Access

1. Open Slack Bubble dashboard.
2. Select your widget.
3. Add or remove Slack users who should participate in conversations.
4. Save changes.

Only assigned users will be able to respond to visitors.

Optional Configuration

Customer name and email

interface BubbleReadyEvent {
  preventDefault(): void
}

window.onBubbleReady = funtion(event: BubbleReadyEvent) {
  event.preventDefault()


}

Customize Appearance

You can configure:

• Widget title
• Welcome message
• Brand color
• Position on screen
• Online/offline behavior from the widget settings page.

Restrict Domains

For security, configure the list of domains where the widget is allowed to load.

Example:

• example.com
• www.example.com
• app.example.com

Troubleshooting

Widget Does Not Appear

Verify:

• The installation snippet is present on the page.
• The Widget ID is correct.
• The website domain is authorized in Slack Bubble.

Messages Do Not Reach Slack

Verify:

• The Slack app is installed.
• Slack Bubble still has access to the workspace.
• At least one team member is assigned to the widget.

Replies Are Not Delivered

Verify:

• The conversation remains open.
• The responding Slack user has access to the widget.
• No browser extensions are blocking the widget.

Support

If you need assistance, contact: [email protected]