Script

Install Raffle widget on your website using our script. Choose your preferred widget and set it up in minutes.

General Instruction

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

Copy and paste the Raffle Script in the site code. The tool_id is provided by Raffle Support. Alternatively, this id can also be located under widget settings.

  • To display in selected pages, add the script to the target page/s (just above the </body>)
  • To display in all pages, place the script with a global element (e.g. within the <footer>)
  • To hide in specific pages, refer to Hide Widget on Subpages
  • To view on web, add the script in a web view configuration and add the same script in a mobile view configuration to properly view on mobile

Refer to the Tag Manager documentation if the script will be implemented using Google Tag Manager.

Additional Notes

The following are additional notes to keep in mind when customizing the Raffle script.

Launcher widget

Only the Raffle script is needed, no additional code change needs to be implemented.

Overlay widget

Option 1: After adding the Raffle Search script, call the Overlay widget from the onClick function of the site search icon/button with the following trigger code:

window.raffleApi.open("tool_id");

Option 2: Alternatively, use the following custom script instead of the default script, in order to override the onClick function of the search icon/button, where element_id is the id of the search icon/button:

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

    var searchBtn = document.querySelector("element_id");
    searchBtn.setAttribute("onclick", "window.raffleApi.open('tool_id')");
  })();
</script>

Embedded/Inline widget

After adding the Raffle Search script, add the following lines to the site code:

  • Add the <div> in the <body> to specify the container of the search, where element_id is provided by Raffle Support. Alternatively, this id can also be located in widget settings:
<div id="element_id"></div>
  • Add the CSS styling outside the <head> and <body>to style the container according to its position, width and height:
#element_id {
  position: relative;
  width: 35rem; /* Raffle Search will take the whole width of the element  */
  min-height: 50px; /* at least 50px is needed to display the search bar  */
}

Multiple widgets

To use more than one widget on a page, append the other tool_id to the original tool_id. Note that:

  • Only one Launcher or Overlay widget can exist on a page
  • Multiple Embedded or Inline widgets can exist on a page, as long as each one has a unique element_id
<script>
  (function () {
    var el = document.createElement("script");
    el.setAttribute("src", "https://cdn.raffle.ai/search/index.js");
    el.setAttribute("id", "raffle-sdk");
    el.setAttribute("defer", "");
    el.setAttribute("data-uid", "tool1_id,tool2_id"); // append the other tool_id after a comma (,)
    document.head.appendChild(el);
  })();
</script>

Specific widgets

To use a specific widget based on where a user is currently browsing on the website, implement a conditional statement:

<script>
  (function () {
    var path1 = "/directory-one"; // subdirectory e.g. /business
    var path2 = "/directory-two"; // subdirectory e.g /private

    if (window.location.pathname.indexOf(path1) === 0) {
      uid = "tool2_id"; // widget specific to contents of /directory-one
    } else if (window.location.pathname.indexOf(path2) === 0) {
      uid = "tool3_id"; // widget specific to contents of /directory-two
    } else {
      uid = "tool_id"; // default tool_id
    }

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

To auto-launch a widget on a website’s homepage (in web view) after x number of seconds, use a timeout function (in the following snippet, 3 seconds is used):

<script>
  (function () {
    var sec = 3000; // 3000 milliseconds = 3 seconds

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

    if (!navigator.userAgentData.mobile) {
      setTimeout(function () {
        window.raffleApi &&
          window.location.pathname === "/" &&
          window.raffleApi.open("tool_id");
      }, sec);
    }
  })();
</script>

Custom Launcher

To modify the look of the Launcher widget, add the following javascript snippet (modify the values according to the site setup):

let button = document.querySelectorAll(
  '[data-testid="raffle-search-launcher-button"]'
)[0];
let buttonText = button.getElementsByTagName("p")[0];
let buttonIcon = button.getElementsByTagName("svg")[0];

// button text manipulation
buttonText.style.fontSize = "4px";

// remove button text
button.removeChild(buttonText);

// button style manipulation
button.style.maxWidth = "100px";

// icon style manipulation
buttonIcon.style.width = "10px";

Widget Events

A list of events emitted by Raffle Search widgets:

search:show     → Widget is loaded (available) and rendered (usable)
search:hide     → Widget is hidden
client:open     → Widget is opened
client:close    → Widget is closed
chat:start      → Chat Support Option is clicked (provides the search query or last chat entry)
chat:ready      → Chat Support Option is registered to be used
chat:end        → Chat Support Option is closed
onsearchresults → Search results are successfully retrieved (provides an array of answers - instant answers only - that will be displayed in the widget)

Next Page

Tag Manager