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

Add a text/media block, then paste the iframe code in like <iframe height="450" src="https://chat.getreveal.ai/i/revealai-demo?iframe=true&rtid=[survey('session id')]" width="400"></iframe>. The important part is the rtid=[survey('session id')] part which is how the Reveal AI interview will get the alchemer session ID stamped onto the survey. You can use the Embedding Configuration builder to copy out the iframe code, then all you need to do is edit the rtid portion.

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();
    }
  });