YesHello OLD
  • 👋 Welcome
  • 📖 Glossary of Terms
  • ☎️ Getting Support
  • 💥 Changelog
    • Import Contacts with Greater Flexibility and Accuracy
    • [v8.3] New Shortcuts Feature, More Variables and Workflows Conditions, and tons of tweaks!
    • [v8.2] Redesigned Messages Module, New Custom Channel Integration, and more new features and fixes!
    • [v8.1] New Navigation Design, New Workflows Steps- Add Google Sheets Row & HTTP Request and more!
    • [v8.0] Workflows (AKA Automation 2.0), WhatsApp Message Template API, and more!
    • [v7.9] WhatsApp Message Template Improvements, Data Export, and more!
    • [v7.8] IMAP/SMTP, Website Chat Improvements, WhatsApp Interactive Message, Broadcast features
    • [v7.7] Instagram, 360dialog Improvements and more!
    • [v7.6] Reports 2.0, Closing Note, and more improvements!
    • [v7.5] Reports, Dashboard 2.0, Data Export, Voice Messaging, Time Zone, and more!
    • [v7.4] Contact Merge, Improved Contact Fields, Receiving Locations and many more improvements
  • ⚡Quick Start Guide
    • Quick Start
    • Connecting a channel
      • Step 1: Register Chat API Account
      • Step 2: Connect WhatsApp Number
      • Step 3: Connect WhatsApp API
      • Invite your teammates
    • Responding via Desktop
    • Responding via Mobile
  • ✅ WHATSAPP API
  • WhatsApp, WhatsApp Business, and WhatsApp Business API
    • Regular or Official WhatsApp API: Comparative Analysis, Advantages and Disadvantages
    • Chat API Documentation
    • 360Dialog Documentation
  • 🏆 SPACE MODULES
  • Dashboard
  • Contacts
    • Contact Details
    • Contact Import
    • Contacts
  • Messages
    • Assignment and Closing a Conversation
    • Troubleshooting Messages
      • Can Views be automatically sorted?
      • Messages not showing in Facebook inbox
  • Snippets
  • Broadcasts
  • Automation
    • Automation Tips and Tricks
    • Simple Chatbots
      • How to Create/Edit Conversations for your Chatbot
      • How to troubleshoot your chatbot's auto messages
      • How to get the bot to follow-up & re-engage your customers?
      • How to set up Menus for your chatbot
      • How to get your chatbot to ask questions
      • How to automate chatbot follow up
  • Surveys
  • Workflows
    • Triggers
    • Steps
  • Files
  • Reports
    • Conversations
    • User
    • Contacts
    • Messages
    • Logs
  • Settings
    • General
    • Channels
      • Chat Menus
    • Users
      • Access Levels
    • Teams
    • Contact Fields
    • Integrations
    • Away Message
    • Automatic Contact Assignment
    • Data Export
    • Closing Notes
    • Contact Fields
  • 👥 USER ACCOUNT
  • User Profile
  • User Activity Status
  • Notifications
  • Reseting your Password
  • Customer Portal
  • Billing (Page Under Construction)
  • Cancel Trial Subscription
  • Upgrading a plan
  • Downgrading a plan
  • 📞CONTACTS & MESSAGES
  • Custom Fields
  • Dynamic Variables
  • Views
  • 🌐MESSAGING CHANNELS
  • Channels Overview
  • Facebook Messenger
    • Facebook Chat Plugin
    • Private Replies
    • Message Tag
    • Troubleshooting Facebook Messenger
      • Refresh Permission for Facebook Messenger
      • WhatsApp Advertising: How to Set up Facebook Ads and Connect With WhatsApp Business
      • How to Connect a Facebook Page to YesHello
      • Can we set auto response for individual pictures of a Facebook post album?
      • What do the initials next to the messages mean?
      • How do I customise Private Replies?
      • How to reply to messages that are more than 24hrs?
  • Instagram
  • WhatsApp
    • Twilio WhatsApp
    • MessageBird WhatsApp
    • Vonage WhatsApp
    • Chat API WhatsApp
    • 360Dialog WhatsApp
      • Setting Up 360Dialog WhatsApp
      • 360 Client Hub Overview
        • Account Activation Process
        • Account Statuses
        • API Key
    • WhatsApp Message Templates
    • Troubleshooting WhatsApp
      • WhatsApp Messages are slow to come in
      • How to connect to WhatsApp (Video)
      • Cannot see WhatsApp chats in the platform?
  • Woocommerce WhatsApp
  • Website Chat Widget
    • Install on WordPress
    • Install on Shopify
    • Install on Wix
    • Install on Squarespace
    • Free Chat Widget Button Tutorial
  • LINE
  • Telegram
  • Viber
  • SMS
    • Twilio SMS
    • Importing Contacts to Twilio SMS
    • MessageBird SMS
    • Vonage SMS
  • Twitter
  • WeChat
  • Email
    • Gmail
    • Other Email
  • Custom Channel
  • 🤖CHATBOTS
    • Step 1: Creating Custom Fields
    • Step 2: Creating The Surveys
    • Step 3: Creating Automations
    • Step 4: Chatbot Review
    • Step 5: Testing Your Chatbot
    • Chatbot Building FAQs
    • Cara Buat Chatbot (Video Bahasa Malaysia)
  • 🧲INTEGRATIONS
  • Dialogflow
    • Connecting to Dialogflow
    • Dialogflow Parameters
      • Tagging
      • Turning the Bot Off
      • Marking as Done
      • Assigning
      • Sending Custom Notifications
      • Unsubscribing
      • Contact Fields & Values
      • Sending Snippets
      • Sending Files
      • Requesting Location
    • Dialogflow Events
    • Response Templates
    • Original Detect Intent Request
    • Custom Payloads
  • Chatbase
  • Zapier
  • 🖥️ DEVELOPER API
  • Contacts API
  • Messages API
    • Message Template API
  • 💼PARTNERSHIP PROGRAMS
  • Overview
  • Affiliate Program
  • 🎉RELEASES
  • Navigating the Platform
  • The YesHello Platform
Powered by GitBook
On this page
  • Connecting Web Chat Widget
  • Installing the Chat Widget
  • Customize the Chat Widget
  • Editing the Chat Widget
  • Troubleshoot

Was this helpful?

Website Chat Widget

Add the YesHello Web Chat Widget to your site.

PreviousWoocommerce WhatsAppNextInstall on WordPress

Last updated 4 years ago

Was this helpful?

The Web Chat Widget allows website visitors to contact you via live chat or through other you have connected.

Connecting Web Chat Widget

1. Navigate to Settings > Add Channel > Web Chat.

2. Add website(s) where the Widget will be added.

3. Select a Theme Color for the Widget via interactive color picker.

4. Select an Icon for the Widget.

Widget can be further customized once connected.

5. Press Next.

6. Add the script provided into your website.

Alternatively, you can send the instructions to someone else.

Installing the Chat Widget

You will have to copy and paste the code just before the end of the <body> section on the backend of your website.

Depending on what system you use to create and manage your website, we have created step by step guides to walk you through installing a Chat Widget onto your website.

If you wish, you can also simply forward the code snippet along with installation instructions to your website administrator. Select the respective checkbox and enter the email address of someone who can help you install the chat plugin.

Once you have copied the code or filled out the email address, press the blue "Done" button to close the menu.

The YesHello Web Chat Widget will appear on your site once the script has been successfully installed.

Customize the Chat Widget

1. Navigate to YesHello Settings > Channel Settings.

2. Find the Web Chat channel to customize the widget.

3. Press the Customize button for the Web Chat.

You can use the fields below to customize the Web Widget for your Language.

Theme Color

The Theme Color will show as the color of your Chat Bubble as well as the Top of your Web Chat when Web Chat is open.

Text Color

The Text Color will as the color of your text of your Chat Bubble.

Title

The Title field will be displayed across the top bar of the Website Chat Widget.

Tagline

The Tagline field will be displayed under the Title.

Input Bar Text

The Input Bar Text will be shown in gray in the message bar as a placeholder.

Web Chat Icon

In the Web Chat Icon field, you can change what icon will be displayed in the circular chat button.

Widget Position

Widget Position allows the Widget Icon to be on the left or the right of the platform.

Widget Channel Links

This option allows the addition of up to six Channel Links as options for your Website Visitors to press at the top of the Web Chat. Every channel you added to this list will be shown at the top of the Web Chat Widget.

As the Channel Widget Links are independent of connected Channels on the platform, links; e.g. Phone Call or Email can be added here in the widget too.

If the Web Chat Widget has never been configured before, Channels that are connected and having adequate information are listed by default by the platform as Widget Channel Links.

The Widget Channel Links can be edited by changing the Input Field of respective channel. They can also be sorted by pressing and holding the icon on the left side of the Input Field for each channel.

If needed, the channels too can removed by pressing the trash icon at the right side of the Input Field.

Press Add Channel to add more Channel Links in the Web Chat Widget.

Here is the list of Input Field required for each of the Channel Links supported.

Channel Links

Input Field Required

WhatsApp

WhatsApp Phone Number

Facebook Messenger

Facebook Page ID

Telegram

Telegram Botname

Twitter

Twitter ID

LINE

LINE ID

Viber

Viber Public Account Name

SMS

SMS Phone Number

Email

Email Address

Phone Call

Phone Number

Web Chat Logo

Drop your logo image here so it will show at the top of the Web Chat. The format can either be in PNG, SVG or JPG and file size is not more than 1.0 MB.

Show Greeting Message Pop Up

When this option is selected the YesHello Widget will pop up with your Greeting Message and chat options after 5 seconds.

Hide Widget Until Triggered By Anchor Reference

When using this option the widget will be completely hidden. Until a the Anchor Reference has been clicked.

#webchat_widget

Using the above anchor you can create a button on your page, to open the widget once clicked.

Pre-Chat Form

Enabling this option will add a pre chat form to your Web Chat. If enabled, your website visitor will not be able to chat until they fill out the form you have set up.

With this option enabled you can change items in the form by adding or removing Custom Fields to the form.

Below the option you may also change the field names so you can optimize the form for your own Language.

Scroll further down and there will be a script to be added into your website.

Any changes to your Web Chat Widget Customizations will be automatically reflected on your website. You do not need to reinstall the script.

Editing the Chat Widget

Once you are happy with your changes, press the blue "Next" button. Here, you can find the script if you wish to add the plugin onto more websites.

You can go ahead and press the "Done" button if you do not need to install the widget onto more websites.

Any changes to your Facebook Customer Chat Plugin settings will be automatically reflected on your website. You do not need to reinstall the script.

Channel Name

Enter a suitable name for the new channel. Note that the Channel Name is private and will only be used within the YesHello Platform to identify this channel.

Greeting Message

You may enter an optional Greeting Message. This is the first message that will be sent to your Contact when they message you through the Web Chat. The Greeting Message will also show if you set your Web Chat to pop up after 5 seconds.

Theme Color And Text Color

Select a Theme color of your choice for your Website Chat Widget using the interactive color picker. The Theme Color will show as the color of your Chat Bubble as well as the Top of your Web Chat when Web Chat is open.

Website URL

Under the Website URL field, enter the URL of the website that you wish to install the widget on. If you do not add your website to this list, your widget will not load. You can enter multiple URLs if you plan on installing the plugin to multiple websites.

Troubleshoot

Connecting Web Chat Widget
Connecting Web Chat
Channel Settings
Widget Channel Links
Installation script

You can change and update the YesHello Web Chat Widget at any time. Navigate to the Settings Module and scroll down to the section. Press the blue "Edit" button next to the Web Chat channel.

Still having trouble with the channel? Contact us !

Install on WordPress
Install on Shopify
Install on Wix
Install on Squarespace
here
Messaging Channels
Website Chat Widget
Pre Chat Form
Manage Channels