Getting Started with Widgets

Start saving time and automating routine processes by leaving this work to a highly-intelligent widget. You can customize the widget’s appearance, teach it to welcome visitors with the right message at the right time, analyze data based on the visitor’s behavior to create even more effective scenarios, and convert visitors into trusted customers.

It’s a simple formula: attract -> engage -> subscribe -> convert. This subscription allows you to contact visitors any time and close the deal, even if a visitor leaves your site. Then, analyze the data you received from each step of the process.

Your journey begins with creating your first project as if one project equals one website and various scenarios of events and messages.

To get started click Create project and name your project.

You can choose whether you want to create only an live version of your widget or add a button to subscribe to your Facebook Chatbot and use all of the expanded features.

If you want to create a widget without a Facebook Chatbot, skip the next section and continue to customize it.

How to Connect Your Business Facebook Page with Widget

Save information about your customers. In this way users will be saved to your auditory with useful information and you can send them campaigns and engage in chatbot scenarios.

To connect your Facebook business page move the switch.

Click Continue with Facebook.

Log in to your personal Facebook account, where you are the admin of business pages you want to connect.

Choose the business pages you want to add to 13chats.

Provide the necessary permissions.

When you finish, click OK.

Choose the page you want to connect to a widget.

Now let’s learn how to customize your widget to match your company design and specific behavior.

How to Customize your widget

Make your widget unique and customize its design to match your company colors. Choose default widget behaviour and a greeting message that will appear each time unless you create different triggers.

You can return to project settings any time you need to change something by clicking on your project in the top menu.

Choose an Appearance – Add More Colors

Navigate to the Profile and Appearance tab to choose a color scheme and chat alignment.

Customize the Default Greeting Message

Navigate to the Widget Settings tab and enter the widget title that your visitors will see in expanded widget mode. Visitors will see this title for your widget in all your website messages.

In the next field enter an impressive line of text for the default message inviting visitors to interact with the widget and get some help. Visitors will see this message each time unless you configure custom events.

When setting up your widget you can see a preview on the right side and see how the widget looks when collapsed and expanded.

Customize Default Behavior

Choose default widget behavior – how it will be shown to visitors: collapsedexpanded, or do not show(widget will be hidden until it is triggered by your scenario). Later you can test and analyze, which widget behavior gets more engagement and impression points, compare them and choose the best option.

Choose the frequency of showing your widget to visitors after a manual close. Later you can also add display conditions – what visitor behavior triggers your widget to display. For example, you can display a widget only if the user has been visiting the site for 30 seconds.

Check your settings again to make sure that everything looks good, if you’re finished, click Get the code.

How to Get a Code to Install Widget to Your Site

Navigate to the Widget Code tab, subscribe to your Facebook chatbot, and copy the code snippet from the next field.

How to Install Widget Code on Your Website

You can insert the script to:

  • every page of your website where online chat is needed before the closing </body> tag;
  • to all pages of your website using Google Tag Manager (GTM);
  • to a file connected to all pages (for example, footer.php).

We also have detailed instructions for installing 13chats widget code on popular CMS and website builders.

Let’s take a closer look at adding the widget code using GTM.

In your Google Tag Manager account, open the container corresponding to your website and select Add a new tag to get started.

Click on the Tag Configuration section and select the Custom HTML tag in the pop-up menu.

Add the following script to the HTML field:

    var body=document.getElementsByTagName('body')[0];
    var script=document.createElement('script');
    script.setAttribute('data-chats-widget-id','значение ID');

Where the 'ID value' is the value you got in the Install Code tab in the project settings in your 13chats account.

Check that the script is correct and scroll down to configure the triggers that will activate the tag.

Click on the Triggering section and select All Pages.

Name the tag and click Save.

Submit your changes in the Google Tag Manager workspace by clicking the Submit button.

How to Check That You Correctly Installed the Widget Code on Your Website

To check if you installed the code correctly – click Check installation and enter your page URL. Then, click Check.

Congrats! Your first widget was successfully installed. Now you can configure additional website messages triggered by various events.

You can switch off this default website message at any time and users won’t see it. To do this navigate to the website message panel and move the slider.

How to Set Up a Request for an Email Address or Phone Number if the Operator Does Not Answer

You can set up a request for the visitor’s email address or phone number in the chat if there is no response from the operator for longer than a time specified – from 0 seconds to 3 minutes. Use the standard query text or edit it to make it match your brand’s tone of voice.

You can also add a link to your terms of use and personal data processing rules with an individual signature.

Now let’s create event triggers to reach your visitors at the right time with the right message.

Updated: 20.07.2021

Read also: