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 and select text/instructions from the options

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="400" and height="550" where the values are pixels

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

5. If you later go to edit the iframe content and see this

Then click on the three dot menu, then “source” to be able to edit the iframe code

Piping in Responses

You can use Reveals placeholder capability ( Using Placeholders ) to pass in data from Alchemer questions into the reveal survey

1. Setup your placeholder in the Reveal design tab. For this example we’ll use a product-name placeholder for a question such as “why did you prefer product-name over it’s competitors?”

2. Update the iframe code in Alchemer to pull the relevant question id and pass it along to the reveal iframe via the URL. In this example the id=5 part is how the Alchemer merge code knows which question response to pipe in

   <iframe 
     src="https://chat.getreveal.ai/i/revealai-demo?iframe=true&rtid=[survey('session id')]&attribute-product-name=[question('value'), id='5']" >
   </iframe>

3. If your responses have special characters in them you’ll want to encode them in the URL by adding urlencode='true' to the merge code

   <iframe 
     src="https://chat.getreveal.ai/i/revealai-demo?iframe=true&rtid=[survey('session id')]&attribute-product-name=[question('value'), id='5', urlencode='true']" >
   </iframe>

Prevent Skipping

To prevent the user skipping past the chatbot you can use some custom javascript to disable the next/submit buttons until the interview is completed.

Important Limitations: These instructions and code snippets are setup for when there is a single iframe and a single custom javascript action on the Alchemer page. If you have a situation where you have multiple iframes then the you will need to modify this to suit your needs. If you put multiple copies of this custom javascript action on the same page they can conflict with each other and have unintended results

1. Edit your iframe code to include a unique ID so that it looks like <iframe id=”your-unique-id” …rest of the iframe code that you had before>

2. Add an Action of type Javascript

3. Add in the following code snippet to disable the submit/next button until the reveal interview is finished

4. Edit the code snippet to suit your needs (see comments with // ACTION)
   

// ACTION: use this if you are disabling a next button, if you are disabling a submit button, replace with  var buttonId = "#sg_SubmitButton";
var buttonId = "sg_NextButton";

// ACTION: Replace with the unique ID you added for your iframe, but leave the "#" prefix
var iframeId = "your-unique-id";

var buttonSelector = "#" + buttonId
var iframeSelector = "#" + iframeId
var widgetCompleted = false;
var tooltipCreated = false;

function disableButton() {

  if ($(buttonSelector).prop("disabled")) return;

  $(buttonSelector).attr("disabled", true);

  $(buttonSelector).addClass('sg-disabled');

  $(buttonSelector).css({
    'opacity': '0.5',
    'cursor': 'not-allowed',
    'position': 'relative'
  });

  // Only create tooltip once
  if (!tooltipCreated) {

    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>');

    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>');

    $(buttonSelector).closest('.sg-button-bar').css('position', 'relative');

    $(buttonSelector).parent().append(tooltip);

    $(buttonSelector).on('mouseenter', function () {
      if ($(this).is(':disabled')) {
        $('.chatbot-tooltip').css('opacity', '1');
      }
    });

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

    tooltipCreated = true;
  }
}

function enableButton() {

  $(buttonSelector).attr("disabled", false);

  $(buttonSelector).removeClass('sg-disabled');

  $(buttonSelector).css({
    'opacity': '1',
    'cursor': 'pointer'
  });

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

// Watch for visibility changes
setInterval(function () {

  var widgetVisible = $(iframeSelector).is(":visible");

  console.log({widgetVisible, widgetCompleted})
  // If widget is visible AND not completed -> disable
  if (widgetVisible && !widgetCompleted) {
    disableButton();
  }

  // If widget hidden OR completed -> enable
  else {
    enableButton();
  }

}, 300);

// Listen for iframe completion
window.addEventListener("message", (event) => {

  if (event.data && event.data.type === "reveal-ai-emit-end-interview") {

    widgetCompleted = true;

    enableButton();
  }
});