Powered by

# Bubble plugin :: Sociocs - Click to Chat by Text

# Introduction

This plugin adds a chat bubble on your website that draw user's attention, and gives them an easy way to reach out to you. It converts an inquiry into SMS / text messaging based conversation, so that your user doesn't have to wait on the website for a response.

When your web app user initiates the inquiry, it shows up in your Sociocs Inbox, from where you can reply to the user, and continue the conversation.

Demo Plugin page on Bubble

# Plugin Installation

  1. In the Bubble dashboard, go to "Plugins".

  2. Click on "+ Add Plugins".

  3. Search for 'Sociocs - "Live Chat" by Text'.

  4. Click on "Install".

# Plugin Configuration

# Twilio

  • You can skip this step if you already have an account with Twilio.
  • If you don't have an account with Twilio, you can sign up for a free trial account. (Once you sign up for a trial, you should consider upgrading right away to avoid outbound SMS restrictions.

# Sociocs

  1. Sign up or log in on app.sociocs.com.

  2. Select "SMS (with Twilio)" in the "Connect a new channel" page. If you are an existing user, after logging in, click on "Channels" menu on the top, click on "+" button to go to the "Connect a new channel" page.

  3. Connect your Twilio phone by following the instructions.

  4. Go to "Connect a new channel" page again (click on "Channels" on the top menu, and click on "+" button), and select "Click to Chat by Text/SMS".

  5. Enter information for your Web Chat plugin and customize the chat prompt UI (if you want), and click "Next".

  6. You should see the plugin code, find these values in the code: "data-channel", "data-primary-color", and "data-prompt-text". These fields are referred without "data-" prefix in the below step (e.g. "data-channel" is referred as "channel" etc.) image

# Bubble Editor

  1. Go to the "Sociocs - Click to Chat by WhatsApp" plugin in the Bubble Editor.

  2. Add "channel", "primary-color", and "prompt-text" configuration parameters.

  3. Bubble also shows fields for adding dev keys (i.e. "channel - dev.", "primary-color - dev.", and "prompt-text - dev."). You can leave them blank.

That's it! Refresh your Bubble web app page, and you should see a chat bubble on bottom right.

© 2024. All rights reserved.