Configure Acquisition Widget

The guide below shows you how to create and publish your user acquisition widget which will grow your audience list.

To get started. navigate to User Acquisition listing page and click on Add New button. This will load the Widget create page which will allow you to specify what type of widget you want to create. See below image for more details.

Here, on left part contains widget type and the right part is for preview. Botgento allows you to choose four different widget type.

  1. Bar widget is a sticky header which will appear at top of the website page.

  2. Slide-in widget will be rendering at left or right side with 3 different position top, middle and bottom.

  3. Page Takeover will cover entire visible section while rendering on your store.

  4. Modal allows you to show center position modal popup with overlay effect.

There're plenty of configuration option which allows you to personalize each of above widget as per your needed. Note that all widget contains some common and specific properties which you will able to see after choosing widget type.

After selecting preferred widget type, system will shows you all configuration related to selected type on left section of the page similar to below image.

You can personalize widget text (title and paragraph) by clicking on it under preview panel. Please find other configurations in details as below.

Configuration

  1. Name: enter widget name which is easy to identify for you.

  2. Status: set widget status as draft or publish as per your needed.

  3. Allowed to hide: if enabled user will able to hide widget by pressing close icon

  4. Show description: if disabled description text will be hide

  5. Color

    1. Background: allows you to set widget background color

    2. Headline: set color for your main title text

    3. Description: set color of description

    4. Overlay background: this option is only available for Modal widget type and hold color code for overlay background.

    5. Close icon background: color applies to close icon

    6. Shadow: set shadow color property for Modal and Bar widget type.

    7. Border: this option is available for Page Takeover widget type, where you can set content box border color.

  6. Overlay opacity: value set in this field will apply to Modal widget overlay properties.

  7. Box radius: the value of this field is apply to content box border of Modal, Slide-in and Page Takeover widget.

  8. Border size: specify border size for content box of Page Takeover widget.

  9. Facebook button color: you can choose 2 different color for Facebook opt-in button.

  10. Facebook button text: set predefined text for your Facebook button. Refer Facebook Send to Messenger Plugin reference for approved button text.

  11. Thank you message: set greeting message which will appear after opt-in for Facebook messenger updates by clicking on CTA button.

  12. Background image: this option is only available for Modal and Slide-in widget. You can choose background image which is visible beside bell icon. The size of image should be 210px in width and height.

  13. Foreground image: similar to background image you can replace bell icon by upload your own image. Again this option is only available for Modal and Slide-in widget and it size should be 104 X 76 pixel.

  14. Custom CSS: you can set your own css properties for main title, description and close icon within this field.

  15. When does it display: you can specify your ideal setting to display widget. Choose any of below option which suitable your requirement.

    1. Immediate: it trigger immediate after page is fully loaded.

    2. Exit intent: it will trigger while your user tries to leave your store.

    3. % scrolled: this will trigger when page scrolled to entered percentage.

    4. When scrolling to specific element with target id: by setting this option you have to mention element id and if user will hover over there widget will be appear. For e.g. hover video play button.

    5. Seconds have passed: widget will be rendering after passing entered seconds.

  16. Show widget to the same user again after: set repetitive frequency for displaying widget to same user. Possible values are:

    1. Newer: if this option is set, widget will be load once and never displayed again same user.

    2. Always: this option will render widget all the time when page is loaded.

    3. Hours: after passing configured hours user will see same widget again.

    4. Days: similar to hours, after passed entered days widget will display to user screen.

  17. If manually closed by user, show after: same as Show widget to the same user again after, if user manually close widget by pressing close icon. Here the possible values is same as above configuration.

The configuration of Show widget to the same user again after & If manually closed by user, show after is depends on browser cookies. If user purge browser cookies, widget will be rendering as per their configuration.

Add widget to Magento store

Once you published user acquisition widget, you have to perform few setup in Magento store in order to render acquisition widget. Inside the widget configuration page you will find JS SNIPPET button. On clicking to that button you will see single line JavaScript code similar to below image.

Copy snippet code by pressing COPY button and paste it into Scipts and Style Sheets under HTML Head section configuration of Magento store.

Refer Scripts and Style Sheets field of Magento 2 User Guide and Miscellaneous Scripts field of Magento 1 User Guide for adding third party scripts to Magento store HEAD tag.

After adding Botgento widget snippet code, you have to refresh Magento store cache to apply this changes.

If you properly configured widget and inject Botgento snippet to Magento store, widget will be rendering to your store front similar to below screen.

You can submit your concerns to our help center.

Last updated