How to install Callbell’s widget on your website and integrate Facebook Messenger, WhatsApp, Telegram and Instagram Direct
In this guide, we’ll explain how to install the Callbell chat widget on your website. To start setting up your custom widget, you’ll first need to create an account on the platform and verify your email address.
From the sign-up page, you can choose to create an account using your Facebook account: this will facilitate the connection of your page to the widget. Once you have created a new account, you will receive an email to confirm your email address and log in to the platform.
Once you have confirmed your email address, you can start setting up your custom chat widget, by integrating the channels you want your website visitors to see. At the time of writing this article, the available channels are Facebook Messenger, WhatsApp, Telegram and Instagram Direct.
1) How to integrate Facebook Messenger
To integrate Facebook Messenger with the chat plugin, you will need to login with the Facebook owner/admin account of the page you want to link to your Callbell account. For this reason, if your account is not linked to any Facebook page, you will not be able to activate Messenger in your widget.
If you are an administrator/manager of one or more pages, you can choose which page to link to the widget. During this phase, Facebook will ask you to authorize Callbell to manage your pages and messages; in order for the widget to work properly, you’ll need to make sure you provide authorisation for both.
N.B .: to ensure that the widget is shown correctly, it is mandatory to provide under the Whitelist Domains section, the domains on which the chat widget will be installed. For example, if the script of your widget will be installed on “callbell.eu”, we will have to enter in this section the domain to be authorized: https://www.callbell.eu.
Integrating Messanger to your Callbell widget will allow desktop users to chat in real time without leaving your website, while if clicked from mobile it will automatically open the Messenger app, opening a chat with your page.
2) How to integrate WhatsApp
To integrate WhatsApp in your chat widget, simply provide the WhatsApp phone number on which you would like to be contacted; it’s possible to integrate either a normal WhatsApp number or a number associated with a WhatsApp Business account.
The integration of WhatsApp will allow desktop users to open, in one click, WhatsApp Web directly on the screen of your account or your WhatsApp Business page, while from mobile it will allow users to open the WhatsApp app on the associated phone number and start a chat instantly.
3) How to integrate Instagram Direct
To integrate Instagram Direct to your chat widget, just provide the username of your Instagram account. Users who click on the Instagram Direct option will be sent back to your page on the app, and will be able to start a conversation via Instagram Direct, by clicking “Send message”.
Note: to date, this option is shown only to mobile users since there is not yet a web version for Instagram Direct. Facebook has recently announced that it is considering the release of a desktop version of the app, and we will update our widget as soon as it is available.
4) How to integrate Telegram
To integrate Telegram, simply enter the name associated with your profile or the name of your channel in case you want to send visitors to your site to the registration page of your Telegram channel.
To set or find the link for your user, you will need to look in the settings and look for your “Username”. If you haven’t set one yet, from here you will first need to decide on a name to associate with your profile.
By clicking on “Edit profile” you will find the link associated with your account and in this way you can integrate Telegram into your Callbell widget.
It is possible to change the chat widget icon and upload a personalized image or gif; to do so, just click on “upload image” and select an image from your computer that you want to use for your widget. You can also set up a welcome message that will be automatically shown to your website visitors.
NB: at the moment, the offline message does not affect the chat widget: our goal at Callbell is to provide a collaborative chat platform (which we will release in the course of 2019) for the centralized management of these channels, and the offline message will be shown when no agent will be online and available to reply. For now, you can ignore this field and leave it inactive.
To install the Callbell widget on your site, simply copy and paste the code at the bottom of the page in the “script” section of your website.
You can also install the widget through Google Tag Manager, to do this you will need to create a custom HTML Tag and copy your code there:
1) Go to the Google Tag Manager container.
2) Section Tag> New> Custom HTML.
3) Paste the code you copied earlier
4) On advanced settings select: tag activation options: Once per page 5) Add the trigger: All Pages.
6) Name the Tag: “Callbell”
7) Save and publish
Need help?
About the author: Hello! I am Carlo and I am one of the co-founder at Callbell, the first communication platform designed to help sales and support teams to collaborate and communicate with customers through direct messaging applications such as WhatsApp, Messenger, Telegram and (soon) Instagram Direct
