Include the Consentua embedding library in the HEAD section of the page.
For the production environment:
<script src="//websdk.consentua.com/websdk/consentua-embed.js" type="text/javascript"></script>
For the test environment:
<script src="//websdk-test.consentua.com/websdk/consentua-embed.js" type="text/javascript"></script>
Add a short script to set up the consentua interaction, and receive the output.
jQuery is assumed in the snippet below, and this example won't work without it. However, jQuery is not a requirement for embedding Consentua.
<!-- It's common (but not required) to embed consent interactions into forms, as in this example -->
<h2>Example signup form with Consentua</h2>
<label>Your name
<input type="text" name="name" value="Joe Bloggs" /></label>
<label>Email Address
<input type="text" name="email" value="jbloggs@example.com" /></label>
<!-- This iframe will hold the consentua interaction -->
<iframe id="consentua-widget" src="" style="box-model: border-box; width: 100%; max-width: 500px;"></iframe>
<p class="notice">The input below shows the user ID that consentua has generated for this user. This ID should be submitted and stored
along with the rest of the form, so that up-to-date consent can be retrieved at any time. Normally, this input would be hidden.</p>
<!-- This hidden field will hold a UID, generated by consentua, so we can retrieve up-to-date consent details later on -->
<input type="text" disabled="dis" name="consentua-uid" id="consentua-uid" value="--not-set--" />
<script>
var cid = '2'; // Customer ID
var sid = '1'; // Consentua service ID
var tid = '1'; // Template ID
/**
* We need to identify who's using this interaction by providing a UserID. This could be
* a customer number, for instance. If it's set to false, as in this example, then Consentua
* will auto-generate a UserID that can be saved later - doing so is useful in situations
* where we don't know the identity of a user in advance, like in a newsletter sign up
* form.
*/
var uid = false;
/**
* There are two event handlers that can be set up on the wrapper; one that's fired
* when the consent interaction is ready (onready), and one that's fired every time
* consent preferences are changed (onset)
*
* The main use for the onready event is to retrieve the auto-generated user id. If a user ID is
* being passed explicitly to Consentua, then this isn't necessary.
*/
var cb_ready = function(msg) {
$('#consentua-uid').val(msg.message.uid);
}
/**
* The onset event includes current consent settings; you can use that information to
* dynamically update the page; for instance by disabling form submission until certain
* core purposes have been consented to.
*/
var cb_set = function (msg) {
console.log("Consent received from Consentua", msg);
if(msg.message.complete) {
$('#signup-form input[type="submit"]').removeAttr('disabled', 'disabled');
}
};
var iframe = document.getElementById('consentua-widget');
/**
* For testing out new interactions, pass an "ix" option that contains the URL of the interaction you want to test.
* This will be used instead of the interaction that the template is bound to in Consentua. e.g.
*
* var cwrap = new ConsentuaUIWrapper(iframe, cid, uid, tid, sid, skey, function(){}, "fr", {ix: "http://127.0.0.1:8080/ui-simple/main.html"});
*/
var cwrap = new ConsentuaEmbed({
iframe: iframe,
clientid: cid,
uid: uid,
templateid: tid,
serviceid: sid
});
cwrap.onset = cb_set;
cwrap.onready = cb_ready;
// Disable submission on the form, until consent has been set
$('#signup-form input[type="submit"]').attr('disabled', 'disabled');
</script>