Skip to main content

Controlling the Web Widget

This guide explains how to use the CueDesk Web Widget's client-side functions to open, close, enable, disable, and configure the widget programmatically on your website.

Overview​

The CueDesk Web Widget provides JavaScript functions that allow you to control the widget's behavior programmatically. These include:

  • Open the widget: CueWidget.openWidget()
  • Close the widget: CueWidget.closeWidget()
  • Enable the widget: CueWidget.enable()
  • Disable the widget: CueWidget.disable()
  • Set Initial Session Data: CueWidget.updateInitialSessionData({ name: 'John Doe' })
  • Check if Widget is Ready: CueWidget.isReady (returns a boolean value)
  • Check if Widget is Enabled: CueWidget.isEnabled (returns a boolean value)

Implementation​

Adding the Widget to Your Page​

To use the widget, include the following script on your webpage. Make sure to replace 00000000-0000-0000-0000-000000000000 with your actual widget ID.

<script>
  window.cueWidgetConfig = {
    id: "00000000-0000-0000-0000-000000000000", // Replace with your widget ID
    onReady: function () {
      // Use CueWidget methods to interact with the widget
      CueWidget.openWidget();
      CueWidget.closeWidget();
      CueWidget.updateInitialSessionData({ name: "John Doe" });
      CueWidget.enable();
      CueWidget.disable();
      console.log("Is Widget Ready?", CueWidget.isReady);
      console.log("Is Widget Enabled?", CueWidget.isEnabled);
    },
    onEnable: function () {
      // Triggered when widget is enabled
    },
    onDisable: function () {
      // Triggered when widget is disabled
    },
  };

  var s = document.createElement("script");
  s.dataset.cueWidgetScript = "true";
  s.dataset.disabled = "true"; // Optional: Start with the widget disabled

  if (window.requirejs && window.requirejs.defined) {
    s.src = "https://webchat.cuedesk.com/widget.iife.js";
  } else {
    s.src = "https://webchat.cuedesk.com/widget.js";
  }
  document.head.appendChild(s);
</script>

Example Usage​

The widget functions can be invoked from anywhere on the page. For instance, you can trigger widget actions using button click events:

<body>
  <button onClick="CueWidget.openWidget()">Open Widget</button>
  <button onClick="CueWidget.closeWidget()">Close Widget</button>
  <button onClick="CueWidget.enable()">Enable Widget</button>
  <button onClick="CueWidget.disable()">Disable Widget</button>
  <button onClick="alert(CueWidget.isReady)">Check if Widget is Ready</button>
  <button onClick="alert(CueWidget.isEnabled)">
    Check if Widget is Enabled
  </button>
</body>

Available Widget Methods​

Open the Widget​

CueWidget.openWidget();

Close the Widget​

CueWidget.closeWidget();

Enable the Widget​

CueWidget.enable();

Disable the Widget​

CueWidget.disable();

Update Initial Session Data​

You can set initial session data when the widget is loaded, for example:

CueWidget.updateInitialSessionData({ name: "John Doe" });

Check if Widget is Ready​

console.log(CueWidget.isReady); // Returns true or false

Check if Widget is Enabled​

console.log(CueWidget.isEnabled); // Returns true or false

Notes​

  1. Ensure the widget ID provided in the configuration is correct.
  2. The CueWidget object becomes available after the widget script has been successfully loaded and initialized.
  3. The onReady function is an event listener that is triggered once the CueWidget script has loaded and is ready to be used. CueWidget or window.CueWidget is only accessible after onReady has fired.
  4. Use onEnable and onDisable callback functions to execute custom logic when the widget's state changes.
  5. Setting s.dataset.disabled = "true" in the script tag starts the widget in a disabled state until explicitly enabled.
  6. CueWidget.isReady and CueWidget.isEnabled can be used to check the widget's current state programmatically.