How to display widgets based on your site logic (e.g. button clicks)

This is an advanced feature and requires some programming knowledge. Please note that we are unable to provide support for creating or troubleshooting custom code.

Your can configure your widget to be displayed when a site visitor performs a certain action on your website (for example, clicks a ‘contact me’ button, adds an item to cart, etc.).

Step 1

Open your Getsitecontrol dashboard, find the necessary widget in the list and click Edit. Switch to the Behavior tab and choose to display the widget programmatically. Please note that once you enable this option all other Behavior and Targeting settings will be ignored. The widget will only be displayed when you call it programmatically.

Step 2

Activate the widget in your dashboard.

Step 3

Use one of the following three methods to trigger the widget.

  1. By adding a data-gsc-widget attribute

    If you have access to HTML, this is the easiest way to trigger the widget.
    Add a data-gsc-widget attribute to the necessary HTML element on your website, the one you want website visitors to click to open the widget.

    <a href="#" data-gsc-widget="82297">Open widget with ID=82297!</a>
  2. By linking a hash address

    This is an alternative way for when you don't have full access to HTML, e.g. if your website is created with a website builder. Add this link to the necessary element:

    <a href="#gscw82297">Open widget with ID=82297!</a>
  3. By using plain JavaScript

    This is the most powerful and advanced method, hence it requires deeper understanding of what you are doing.
    Activate the widget using this JavaScript function:

    function showWidget(){
     _gscq.push(["show", 82297]);
    Then use the function showWidget using your preferred method, i.e.:
    <!--In link href-->
    <a href="javascript:showWidget()">Open widget with ID=82297!</a>
    <!--In "onclick" handler-->
    <a onclick="showWidget()">Open widget with ID=82297!</a>
    //In JS event handler
    document.getElementById("some_link").addEventListener("click",showWidget, false)
    //In JQuery 

    82297 in our example is the widget's ID, you will need to change it to the ID of the actual widget you want to be triggered. To find this ID, open the list of your widgets in the dashboard. The unique ID of each widget is indicated in the lower right corner.

Other articles you might find helpful: