Zendesk

Replace the search bar of your Zendesk Help Center with a Raffle embedded widget by adding the Raffle script to your theme.

As an administrator, you can put a Raffle embedded widget in place of the search bar of your Zendesk Help Center.

First, prepare the widget in Raffle:

  1. Create an Embedded widget, or open an existing one (see Create a widget)
  2. On its General tab, enter #raffle-target as the Element selector, and click Save
  3. Copy the widget’s UID from its Install dialog (see Install)

Then add the script to your Zendesk theme:

<script>
  (function () {
    window.addEventListener("load", function () {
      var form = document.getElementsByClassName("search-full")[0];
      if (!form) return;

      // Remove Zendesk's own search bar
      Array.from(form.children).forEach(function (child) {
        child.remove();
      });

      // Add the element the Raffle widget is placed in
      var target = document.createElement("div");
      target.setAttribute("id", "raffle-target");
      target.style.height = "3rem";
      target.style.width = "100%";
      target.style.position = "relative";
      form.append(target);
    });

    var el = document.createElement("script");
    el.setAttribute("src", "https://cdn.raffle.ai/search-v2/index.js");
    el.setAttribute("id", "raffle-sdk-v2");
    el.setAttribute("type", "module");
    el.setAttribute("data-uid", "tool_id");
    document.head.appendChild(el);
  })();
</script>

The script replaces the contents of the element with the class search-full, which holds the search bar in Zendesk’s standard theme. If your theme names it differently, change the class name in the script.