Setting Custom Data For Widget

1 Minute to read

Dark
Light

Article Summary

Share feedback

Thanks for sharing your feedback!

You can easily set the custom data for your widget.

This feature can be used for following cases:

Sending your tracking cookie (_ga, _fbc, _fbp, affiliate or any other)
Sending custom data for lead (This custom data will be available in the converted leads)

You can set your custom data on the 'widget_loaded' event of UCL widget.
This makes sure that your custom data is attached to the widget.

Below is the example of setting custom data for a widget.

<!DOCTYPE html>
<html>
   <head>
      <title>UCL Widget</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   </head>
   <body>
      <!-- UCL WIDGET STARTS HERE -->
      <link rel="stylesheet" type="text/css" href="https://30096.domarketing.ca/widgets/css/widget.css">
      <div class="ucl-widget" id="ucl_widget">
         <div id="ucl_widget_frame_container"></div>
         <div id="ucl_widget_frame_loader"><span class="ucl-loader"></span></div>
      </div>
      <script type="text/javascript" src="https://30096.domarketing.ca/widgets/js/widget.js" onload="set_ucl_widget(30096);"></script>
      <script type="text/javascript">
         (function() {
            ucl_widget.on('widget_loaded', event => {
                // do anything when widget is loaded
                // below is an example of how to set custom data for the widget
                let ucl_widget_custom_data = {
                    custom_key_1: 'Value of custom key 1',
                    custom_key_2: 'Value of custom key 2',
                    custom_key_3: 'Value of custom key 3',
                }; // create an object with key values of your custom data
                ucl_widget_set_custom_data(ucl_widget_custom_data); // send your custom data to widget
            });
         })();
      </script>
      <!-- UCL WIDGET ENDS HERE  -->
   </body>
</html>

Below is the example of the lead who has custom data attached to it.

The function ucl_widget_set_custom_data accepts an object with key value pair of integer or string.

You can set keys and values according to your need.

Below is an example of getting cookie and setting it in the custom value of the widget.

<script>
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}
ucl_widget.on('widget_loaded', event => {    
   let ucl_widget_custom_data = {
        _ga: getCookie('_ga'),
        _gid: getCookie('_gid'),
        _fbp: getCookie('_fbp'),
        _fbc: getCookie('_fbc')
    };
    ucl_widget_set_custom_data(ucl_widget_custom_data);
});
</script>

Was this article helpful?

What's Next

Events From Widgets