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.

Type the name of the project and click Continue.

Pop-ups and an online chat widget will be added to the project by default. Use the sliders to change the settings: turn off the display of the online chat and/or add a subscribe button to the Facebook Messenger chatbot and a floating panel with messengers buttons.

How to create a project using pop-ups only

If you want to create only pop-ups without an online chat widget, a Facebook chatbot, and messengers buttons, leave the “Add and always display online chat widget”, and “Add a Facebook Messenger button” sliders inactive and click Continue.

Next, install the code on the website.

How to create a project with pop-ups and an online chat widget and/or messenger buttons in a floating panel

If you want to add an online chat widget to the project, activate the “Add and permanently display online chat widget on the website” slider and click “Continue.”

Activate the “Add floating panel with messenger buttons” slider to add a floating block with messenger buttons.

You can add up to 10 instant messengers at the same time:

  • Telegram;
  • WhatsApp;
  • Viber;
  • Facebook Messenger;
  • Instagram;
  • YouTube;
  • VK;
  • Twitter;
  • Snapchat;
  • custom link (custom link).

The order of buttons can be changed using Drag&Drop.
The floating button is displayed on desktops and mobiles with user-friendly preview animations on the viewer side.

Click the “Continue” button after the links to the required company messengers have been added.

How to create a project with pop-ups and an online chat widget

Activate the “Add and permanently display the chat widget on the website” slider and click Continue.

The next step is customizing your welcome message and the widget design. Make your widget unique and customize its design to match your company’s colors. Choose default widget behavior and a greeting message that will appear each time unless you create different pop-ups. You can return to project settings any time you need to change something by clicking on your project in the top menu.

During the customization, you’ll see a preview of the widget on the right. Click on the button highlighted in the screenshot below to see the widget collapsed and expanded.

Customize Default Behavior

Choose default widget behavior – how it will be shown to visitors: collapsedexpanded, or collapsed widget with a permanent message preview. 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.

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.

Choose an Appearance — Add More Colors

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

Choose the color scheme and the online chat position in the highlighted section on the screenshot.

Check your settings again to make sure that everything looks good, if you’re finished, switch to the following section.

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.

Requirements to consider before starting the integration

Before connecting a business page:

Log into your Facebook account with administrator rights.

You can connect only one Facebook account to one project in the 13Chats panel.

There should be no integrations with other messenger marketing services, for example, SendPulse, ManyChat, Jivo on the “Active” tab in the “Business integrations” section of Facebook (Settings and privacy> Settings> Business integrations). This will help to avoid conflicts.

If you have previously created an integration with a third-party service, go to your account in this service (for example, ManyChat) and remove the integration with your public page, first inside the service, and then from active business integrations in your Facebook account.

We recommend turning off VPN and blocking extensions in the browser while connecting the Facebook business page to the 13Chats project. Start the integration once all of the requirements have been met.

Configuring the integration of a Facebook business page with the 13Chats project

Move the slider to add a Facebook Messenger button.

Click Continue with Facebook or Refresh the access rights.

Important: you need to log in with a personal account with administrator rights to connect a business page. It’s necessary for the service’s continual activity — so that all messages are connected to the 13Chats interface, and you can immediately manage the access of moderators from our admin panel. All permissions are selected by default, do not change them.

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.

If you met all the requirements and went through all the integration steps one by one, but the Facebook business page did not connect, contact technical support so that we can check the status of your connection.

How to Get a Code to Install Widget to Your Site

Navigate to the Code Installation tab and choose a suitable pricing plan. Read the FAQs about pricing plans and payments.

Subscribe to your Facebook chatbot if you added the Facebook Messenger button to your project in the previous steps, 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 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:

<script> 
    var body=document.getElementsByTagName('body')[0];
    var script=document.createElement('script');
    script.async=true;
    script.src='https://widget.13Chats.com/assets/loader.js';
    script.setAttribute('data-chats-widget-id','значение ID');
    body.appendChild(script); 
</script>

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.

After you have inserted the code on the site — check if it works correctly. We have foreseen everything, 13Chats will do it automatically. Just click “Verify Installation”, enter the page URL in the format https://site.com/index.html, and click “Verify.”

If you have received the “Installation was successful” status, congratulations — you have installed the first widget.

Don’t worry if the system has shown the status “Access denied.” Your website may have a JavaScript blocker that does not allow verification but does not in any way affect the display of the online chat widget or pop-ups on your website.

If 13Chats tools are not displayed, contact the website administrator or technical support. Perhaps you have banned the execution of third-party scripts or set up Content Security Policy (CSP).

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

After you have inserted the code on the site — check if it works correctly. We have foreseen everything, 13Chats will do it automatically. Just click “Verify Installation”, enter the page URL in the format https://site.com/index.html, and click “Verify.”

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 set up additional website messages triggered by various events.

Don’t worry if the system has shown the status “Access denied.” Your website may have a JavaScript blocker that does not allow verification but does not in any way affect the display of the online chat widget or pop-ups on your website.

If 13Chats tools are not displayed, contact the website administrator or technical support. Perhaps you have banned the execution of third-party scripts or set up Content Security Policy (CSP).

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: 19.10.2021

1 Star2 Stars3 Stars4 Stars5 Stars
Loading...
Average Rating: 5/5
Total Votes: 1

Read also: