Integrating Reveal AI Into Other Survey Platforms
Written By revealai
Last updated 18 days ago
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
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


In the Alchemer platform in your survey add a text/media block
Paste the iframe code in and make the following edits
replace
&rtid=RTIDGOESHEREwithrtid=[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.add width and height attributes to your iframe to control the size such as
width="500"andheight="700"where the values are pixels
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();
}
});