User Guide

What are Overlay Widgets?

It is a growth tool feature which allows you to expand your audience on Facebook. These widgets can be used on any platform that supports customizing the <head> section. They overlay the actual website content so there is no need to integrate them manually into the page content. So easy: insert the code — customize your Widget in KiboPush — activate it.

Next time you need to make any changes to your Widget, manage it right in KiboPush account. Customize it as you want, disable and enable it back and then you can see the changes on your website.

How to use Overlay Widgets?

1. Click on ‘Growth Tools’ from the sidebar and from the dropdown, click on Overlay Widgets.

2. Here you can see all the overlay widgets that you have created.

3. To create a new Overlay widget for your page, click  on ‘+ Create New’.

4. Enter the title of this widget. Select a page for which you want to create this widget. Select the widget type. Widget type is basically how this widget will appear on your website.

5. There are 4 steps to setup the widget. Let’s look at the first step – Initial State. In this step, you can set up your Widget appearance. Edit the title and description, choose the button type, select appealing colours. Customise it the way to want.

6. Click on next to go to the next step – Submitted State.

7. In submitted state, you will set up what your widget will look like after your visitor submits the Button (the send to messenger button). You have several options to customise it. You can decide if you want to redirect the visitor to a url or show new message on the button click.

8. Click on Next to go to opt-in message.

9. Here, you will set up the Message your visitors will get after they interact (i.e. they press the send to messenger button). The message you set up here, will be sent to your subscribers on messenger when they tap the send to messenger button. Click on the edit icon to edit the message.

10. Set up your desired message and click on Save.

11. Click on Back to go back to the previous screen.

12. Click on next to reach the final step – Setup.

13.Here, you will get the widget code to copy to your website. Click on Install Javascript Snippet to get the code.

14. In order to get the code, you need to whitelist your website at which you want to show this widget. Enter your website and click on Add.

15. Click on Install Snippet to get the code.

16. Copy the code and paste it in <head> section on your website (the same place you insert your Google Analytics script)

17. Click on Save to save this widget.

18. In order to make changes to already created overlay widget, click on Edit.


19. Click on delete to deleted the overlay widget.