Integrating Reveal AI Into Other Survey Platforms

As mentioned in the Embed RevealAI iFrame you may want to embed a Reveal AI conversational survey into another survey platform. Maybe you’re already heavily invested in that platform or maybe you want to leverage some of the features that they supply and Reveal does not yet support. Either way we’re here to help you integrate and get the best of both worlds.

Which platforms support embedding Reveal AI?

Integrating w/ Alchemer

Add the Iframe

1. In the Reveal platform, on the Design Tab, use the Embedding Configuration button to customize your iframe setup (color, progress, titles). Make sure that you check “Use Reveal Tracking ID” and then copy the iframe code at the bottom

   
   

2. In the Alchemer platform in your survey add a text/media block

3. Paste the iframe code in and make the following edits

   1. replace &rtid=RTIDGOESHERE with rtid=[survey('session id')] . This is how the Alchemer session ID is passed into the reveal platform and stamped onto the reveal data so you can match things back up.

   2. add width and height attributes to your iframe to control the size such as width="500" and height="700" where the values are pixels

4. All told your iframe code should look something like <iframe width="400" height="450" src="https://chat.getreveal.ai/i/revealai-demo?iframe=true&rtid=[survey('session id')]"></iframe>

Prevent Skipping

To prevent the user skipping past the chatbot, add an Action of type Javascript, then in the javascript block add in the following code snippet to disable the submit button until the reveal interview is finished

var id = "#sg_NextButton"; // The id should be updated depending on if it's a next or submit button
// var id = "#sg_SubmitButton";

  $(function(){
    // Disable the button
    $(id).attr("disabled", true);

    // Add disabled styling with custom styles
    $(id).addClass('sg-disabled');
    $(id).css({
      'opacity': '0.5',
      'cursor': 'not-allowed',
      'position': 'relative'
    });

    // Create and add tooltip
    var tooltip = $('<div class="chatbot-tooltip" style="' +
      'position: absolute; ' +
      'bottom: 100%; ' +
      'left: 50%; ' +
      'transform: translateX(-50%); ' +
      'background-color: #333; ' +
      'color: white; ' +
      'padding: 8px 12px; ' +
      'border-radius: 4px; ' +
      'font-size: 13px; ' +
      'white-space: nowrap; ' +
      'margin-bottom: 8px; ' +
      'opacity: 0; ' +
      'pointer-events: none; ' +
      'transition: opacity 0.2s ease; ' +
      'z-index: 1000; ' +
      '">Please complete the chatbot interview first</div>');

    // Add arrow to tooltip
    tooltip.append('<div style="' +
      'position: absolute; ' +
      'top: 100%; ' +
      'left: 50%; ' +
      'transform: translateX(-50%); ' +
      'width: 0; ' +
      'height: 0; ' +
      'border-left: 6px solid transparent; ' +
      'border-right: 6px solid transparent; ' +
      'border-top: 6px solid #333; ' +
      '"></div>');

    // Make the button-bar relative instead of wrapping the button
    $(id).closest('.sg-button-bar').css('position', 'relative');

    // Add tooltip to button bar
    $(id).parent().append(tooltip);

    // Show tooltip on hover
    $(id).on('mouseenter', function() {
      if ($(this).is(':disabled')) {
        tooltip.css('opacity', '1');
      }
    });

    $(id).on('mouseleave', function() {
      tooltip.css('opacity', '0');
    });
  });

  window.addEventListener("message", (event) => {
    if (event.data && event.data.type === "reveal-ai-emit-end-interview") {
      // Enable button
      $(id).attr("disabled", false);

      // Remove disabled styling
      $(id).removeClass('sg-disabled');
      $(id).css({
        'opacity': '1',
        'cursor': 'pointer'
      });

      // Remove tooltip
      $('.chatbot-tooltip').remove();
    }
  });