Overview

To integrate a Survata surveywall into your website:

Include the Survata JavaScript snippet within the <head> tag.
Create a surveywall object: Survata.createSurveywall()
Trigger a Survata interview: surveywallObj.startInterview()

Instructions

1. Add the Survata snippet to your page

Add the following JavaScript snippet to the head section of your page.

<script type="text/javascript">
    (function(w, d, t, v) {
        w[v] = w[v] || {}; w[v].qr = []; w[v].qf = [];
        var got = 0, g = function() {
            if (got) { return; } got = 1;
            w[v].ft = setTimeout(function() {
                for (var i = 0; i < w[v].qf.length ; i++) { w[v].qf[i][0].call(w[v]); }
                w[v].f = 1; w[v].qf = [];
                w[v].fail = function(fn) { fn.call(w[v]); return w[v]; };
            }, 5000);
            var s = d.createElement(t);
            s.src = ('https:' === d.location.protocol ? 'https:' : 'http:') + "//api.survata.net/latest/js/survata.js?cb="+((new Date().getTime())/1e3).toFixed();
            var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);
        };
        w[v].ready = function() { g(); w[v].qr.push(arguments); return w[v]; };
        w[v].fail = function() { g(); w[v].qf.push(arguments); return w[v]; };
        w[v].publisher = "a2e2eef1-f7db-4aec-a70d-04bb575fb61c";
    }(window, document, 'script', 'Survata'));
</script>

Notes

This snippet loads the Survata library asynchronously and will not delay the loading of other page resources.
We guarantee that we will not introduce "breaking changes" within a major API version. So, if your snippet references a major API version (e.g. v3), then your integration will continue to work as the API is upgraded. Minor version upgrades (e.g. v3.1) include bug fixes and feature additions but no breaking changes. Any change that breaks compatibility will result in a major version number upgrade (e.g. to v4).
We do occasionally require that publishers upgrade to a new major API version, which might require code changes.

2. Create the Survata surveywall object and wait for "load" event

Register any code that uses the Survata library inside the Survata.ready callback, which will be executed when Survata library is ready for execution. Within this call, create a surveywall object by calling Survata.createSurveywall, which accepts an (optional) object with the following options:

brand - the brand name for your site (default: your domain name)

hideFooter - Hide the Survata footer if set to true

explainer - a short sentence that explains the surveywall to your users

parent - DOM element where Surveywall will be displayed.

allowSkip - Allow user to skip the survey if set to true

disallowClose - Allow user to abandon the survey and still get access to the content if set to true

Attach an event handler to the surveywall object and wait for the "load" event, which will occur when the surveywall is loaded. If an interview is available for the user, the survey wall will appear and will block the content until completed.

Add one the snippets below at the bottom on your page:

Version 1: On load, show a button that will open the surveywall in an overlay

<script>
(function() {
	var $publisherContent = null;
    var survataReady = false;

    // when survata is ready, show the survey
    function showSurvey() {
        if (survataReady) {
            s.startInterview();
        }
        else {
            setTimeout(showSurvey, 500);
        }
    }

    // hide Survata and show original content
    function hideSurvata(unlockContent) {
        jQuery('#survata-content').hide();
        if ($publisherContent && unlockContent) {
            $publisherContent.show();
        }
    };
 
	// hide content and attach click handler to Survata button 
    jQuery(document).ready(function() {
        $publisherContent = jQuery('#publisher-content').hide();
        jQuery('#survata-button').on('click', showSurvey);
    });

    Survata.ready(function() {
        s = Survata.createSurveywall({
            brand: 'Software Solutions',
            explainer: 'Take a quick survey to get access to this article',
        });
 
        s.on('load', function(data) {
            if (data.status === 'monetizable') {
                jQuery('#survata-loading').remove();
                jQuery('#button-wrapper').show();
                survataReady = true;
            }
            else {
                hideSurvata(true);
            }
        });
        s.on('interviewAbandon', function() {
            // can either grant access to content by uncommenting out the line below.
            // otherwise, it will just leave the button up in case the respondent
            // wants to continue the survey
            // hideSurvata(true);
        });
        s.on('interviewComplete', function() {
            hideSurvata(true);
        });
    }, true);

    Survata.fail(function() {
        hideSurvata(true);
    });
})();
 
</script>

Example Survata content block within <div class="p402_premium"> Feel free to modify to meet your needs.

<div id="survata-content" style="margin-bottom: 40px;">
	<div id="button-wrapper" style="display:none;">
		<p style="margin-bottom: 5px;">Take a short survey to get access to the article</p>
		<button id="survata-button" class="btn btn-sm">Click</button>
	</div>
	<div id="survata-loading" style="text-align:center; margin-top: 50px;">
		<img src="//media.survata.com/loaders/circles_medium.gif" style="margin: 0 auto;"/>
		<p style="margin-top: 5px;">Loading</p>
	</div>
</div>

Version 2: Display surveywall inline by specifying a parent div to attach to

<script>
(function() {
	var $publisherContent = null;
   
    // hide Survata and show original content
    function hideSurvata(unlockContent) {
        jQuery('#survata-content').hide();
        if ($publisherContent && unlockContent) {
            $publisherContent.show();
        }
    };
 
	// hide content and attach click handler to Survata button 
    jQuery(document).ready(function() {
        $publisherContent = jQuery('#publisher-content').hide();
    });

    Survata.ready(function() {
        s = Survata.createSurveywall({
            brand: 'Software Solutions',
            explainer: 'Take a quick survey to get access to this article',
			parent: '#survata-content',
			hideHeader: true,
            hideFooter: true,
            hideProgress: true,
            verticalLayout: true
        });
 
        s.on('load', function(data) {
            if (data.status === 'monetizable') {
                jQuery('#survata-loading').remove();
                s.startInterview();
            }
            else {
                hideSurvata(true);
            }
        });
        s.on('interviewAbandon', function() {
            hideSurvata(true);
        });
        s.on('interviewComplete', function() {
            hideSurvata(true);
        });
    }, true);

    Survata.fail(function() {
        hideSurvata(true);
    });
})();
 
</script>

Example Survata content block within <div class="p402_premium"> Feel free to modify to meet your needs.

<div id="survata-content" style="height: 400px;">
	<div id="survata-loading" style="text-align:center; margin-top: 50px;">
   		<img src="//media.survata.com/loaders/circles_medium.gif" style="margin: 0 auto;"/>
        <p style="margin-top: 5px;">Loading</p>
	</div>
</div>

Here is a link to a demo integration:

https://www.survata.com/publisher-demos/software-solutions/

For additional information, here is a link to our general publisher integration document:

Publisher API documentation