Script

Raffle Search as a widget for websites

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 Search UI 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 Search UI

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

Overlay Search UI

Option 1: After adding the Raffle Search script, call the Overlay Search UI 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 Search UI

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 Search UI 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 Search UIs

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

  • Only one Launcher or Overlay Search UI can exist on a page
  • Multiple Embedded or Inline Search UIs 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 Search UIs

To use a specific Search UI 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"; // search ui specific to contents of /directory-one
  } else if (window.location.pathname.indexOf(path2) === 0) {
    uid = "tool3_id"; // search ui 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 Search UI 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 Search UI, 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)