On your website, you can place messenger buttons that launch bot chains.
Setting
- Under Growth Tools, select Button Widget.
- Enter the widget name and labels that will be assigned to the subscriber when the funnel is launched.
- Add buttons that will be displayed in the widget.
- You need to select a bot or automatic mailing that will be launched upon subscription.
- Customize the visual display of the widget on the site. The result can be seen in the preview field on the right.
- Proceed to the next step to install the widget. When you first create a widget, you will see the Forward . After editing the widget, you will be able to save it.
Installation
- Install the javascript code on your site. This code allows BotHelp to display the widget on your site and starts the funnel chain. Add it to the section<head> on every page of your website where the widget will be used.
- Insert widget. This code allows you to place buttons on your site. Paste it where you want the widget to appear.
Important! It is enough to install the code on the site once. In the future, you will be able to change the display and funnel directly in the widget settings in the account. Everything on the site will change automatically.
You can also use the growth tool Subscription Widget .
Transferring UTM tags and parameters when subscribing from a widget button
If the widget buttons are installed on a site with UTM tags and other parameters added to the link, the tags will be transferred to our platform when the bot chain is launched.
IMPORTANT! Works for Telegram , Viber, Facebook* and VKontakte .
An example of a link to a site with a UTM tag " utm_content " and a custom field parameter " pole ":
https://768767.tilda.ws/landing_widget?pole=123456&utm_content=tilda
After subscribing from the widget button on the site, if the site link contains the named parameters, their values will be recorded in the subscriber card in the corresponding fields. For this, the site link must contain the named parameters.
(!) If the required custom field does not yet exist in the subscriber card, the data will not be recorded. That is, the field must first be created.
Frequently asked questions
How to track conversions with Facebook pixel* when installing a widget on a website?
You need to insert the pixel code into the site. Conversion tracking and other analytics in the case of widgets are on the user's side.
How to set up data collection (email, phone) on the site via a widget?
You can only launch the bot from the widget. Data collection can be configured in the bot itself.
Is it possible to pass UTM tags when subscribing from a widget button?
Yes, if the widget button is installed on a site with UTM tags added to the link. Then the tags will be transferred to our platform when the user subscribes.
Is it possible to insert several widgets into different blocks on one page of the site?
Yes, you can use multiple widgets on a page. And there is also the possibility to combine widgets on the site.
What should I do to change the arrangement of widgets?
- To align horizontally
Add one of the following properties to your container:
style="display: flex; justify-content: flex-start" (at the beginning, by default)
style="display: flex; justify-content: center" (at the center)
style="display: flex; justify-content: flex-end" (at the end)
Example:
<div id="bh-widget-button-root" data-bh-widget-id="100" data-bh-customer-id="100" style="display: flex; justify-content: center"></div>
- vertical placement depends on where you insert the container.
Example:
<div>Section 1</div>
<div>Section 2</div>
<div id=»bh-widget-button-root»>Button widget</div>
<div>Section 3</div>
In this version, the widget will be between the Section 2 and Section 3 blocks.
- To make them at the very bottom , you need to change the structure to the following:
<div>Section 1</div>
<div>Section 2</div>
<div>Section 3</div>
<div id=»bh-widget-button-root»>Button widget</div>
How to remove the inscription "Made on BotHelp"
It can be removed via CSS styles. To do this, add the following to the page's CSS code:
.bh-powered-by { display:none !important;}
If your site is on a constructor in which you cannot change the CSS code, then before inserting the widget code you need to add the code:
<style>.bh-powered-by { display:none !important;}</style>
If you are adding a widget button on Tilda, you need to specify a slightly different code:
<style>.bh-w-powered-by { display:none !important;}</style>
* Belongs to the Meta organization, recognized as extremist and banned in the Russian Federation.
If you have not found the answer to your question, ask us in the chat inside your account or write to BotHelpSupportBot or to hello@bothelp.io
Get 14 days of full functionality of the platform for creating mailings, autofunnels and chatbots BotHelp.