Examples Page

In this page you may find a few examples of the multiple ways to interact with GetComplied.
Return to GetComplied.com GetComplied Official Docs Return to GetComplied.com GetComplied Official Docs
In this demo you will find examples for:

Buttons Actions Examples

Example of a button with the link to open the modal.
View in docs
Open Modal
<button gc-prompt-caller class="btn">Open</button>
Example of a button with javascript
View in docs
Button with Javascript
<button id="openmodal" class="btn">Open</button>

<script> 
	openmodal = document.getElementById('openmodal');
	openmodal.addEventListener('click', function(){
		console.log('01 - Modal Opened via Javascript');
		getComplied.command('show');
	});
</script>
Example of a button with link to a resource via index order
View in docs
Open Modal in Chosen Language
<button id="openmodallangpt" class="btn">Open in Portuguese </button>
<button id="openmodallangen" class="btn">Open in English </button>

<script> 
  	// Open modal in Portuguese
	openmodallangpt = document.getElementById('openmodallangpt');
	openmodallangpt.addEventListener('click', function(){
		console.log('02 - Open in Portuguese');
		getComplied.lang = 'pt-PT';
		getComplied.command('show');
	});
	// Open modal in English
	openmodallangen = document.getElementById('openmodallangen');
	openmodallangen.addEventListener('click', function(){
		console.log('03 - Open in English');
		getComplied.lang = 'en-US';
		getComplied.command('show');
	});
</script>
Example of a button with link to open inside a custom container
Open in Custom Container
View in docs
Open Modal inside Container
<script> 
	getComplied.container = document.getElementById('insidecontainer');
	getComplied.callback.oninit = function(){
		updateResults('oninit', 'default');
		$('body').addClass('o-hidden');
		$('body').append('<div id="overlay-example"></div>');
		$('#insidecontainer').addClass('active');
	}
</script>
Force Required, disable continue anyway.
Force required
View in docs
Continue Anyway
<script> 
	console.log('06 - Force required');			
	getComplied.continueAnyway = false;
	getComplied.callback.oninit = function(){
		updateResults('oninit', 'default');
		getComplied.command('show');
	}	
</script>
Open specific view
Open View
View in docs
Open Modal on Specific View
<script>      
	getComplied.callback.oninit = function(){
		updateResults('oninit', 'default');
		getComplied.command('change-view', 'static', 'languages');
		getComplied.command('show');
	}
</script>
Open specific id
Open View
View in docs
Open Modal on Specific ID
<script> 
	getComplied.callback.oninit = function(){
		updateResults('oninit', 'default');
		getComplied.command('change-view', 'id', 119);
		getComplied.command('show');
	}
</script>
Open specific index
Open Index
View in docs
Open Modal on Specific Index
<script> 
	getComplied.callback.oninit = function(){
		updateResults('oninit', 'default');
		getComplied.command('change-view', 'index', 1)
		getComplied.command('show');
	}
</script>
Send users information to GetComplied

Examples:

  • Full Name
  • E-mail
  • Birthdate
  • Country
  • Gender
  • Address
  • City
  • Zipcode
  • Phone
  • BusinessEmail
View in docs
Send users information to GetComplied
<script> 
	getComplied.callback.oninit = function(){
		updateResults('oninit', 'default');
		getComplied.command('user', { 
			Name: 'Firstname Lastname',
			Email: 'user@email.com'
		});
		getComplied.command('show');
	}			
</script>

Query String Examples

Example of a button with a query string to open the modal.
Open
View in docs
Open Modal with Query String
<a href="?gc_show=true">Open</a>
Example of a button with link to an resource via index order
Open in Portuguese Open in English
View in docs
Open Modal Resource with Query String
<a href="?gc_lang=pt-PT">Open in Portuguese</a>
<a href="?gc_lang=en-GB">Open in English</a>
Open specific view through a query string.
View Example
View in docs
Open Modal on View with Query String
<a href="?gc_view_id=13">View Example</a>
Open specific index through a query string.
View Example
View in docs
Open Modal on Index with Query String
<a href="?gc_view_index=1">View Example</a>
Send users information to GetComplied through a query string.

Examples:

  • E-mail
  • Birthdate
  • Phone
  • Country
  • Gender
  • Address
  • City
  • Full Name
Send User's Data
View in docs
Send user info with Query String
<a href="?gc_email=user@email.com&gc_birthdate_day=1&gc_birthdate_month=1&gc_birthdate_year=1990&gc_callingcode=+351&gc_countrycode=PT&gc_gender=0&gc_addressline1=Address&gc_city=City&gc_phonenumber=912345678">
	Send User's Data
</a>
Open Debug Mode
Open debug mode
View in docs
Open Debug Mode
<a href="?gc_console=true">Open debug mode</a>

Data Attributes

Example of buttons with data attributes to specific views
Terms and Conditions

Cookies Policy

Privacy Policy

Marketing Policy

View in docs
Buttons with Data Attributes to Specific Views
<div class="btn" gc-open-view-index="0"> Terms and Conditions </div>

<div class="btn" gc-open-view-index="1"> Cookies Policy </div>

<div class="btn" gc-open-view-index="2"> Privacy Policy </div>

<div class="btn" gc-open-view-index="3"> Marketing Policy </div>

Call Back Functions

Realtime history log with callbacks from GetComplied interactions:
Callback History Log
View in docs
Open Debug Mode
<script>
	getComplied.callback.onopen = function(){ 
		/* your code goes here */ 
		updateResults('Modal was opened', 'info');
	}
	getComplied.callback.onclose = function(){ 
		/* your code goes here */ 
		updateResults('Modal was closed', 'danger');
	}
	getComplied.callback.onlangchange = function(data){ 
		/* your code goes here */ 
		updateResults('Language was changed', 'secondary');
	}
	getComplied.callback.onsave = function(data){ 
		/* your code goes here */ 
		updateResults('User Approved Consent', 'success');
	}
	getComplied.callback.oninit = function(data){
		updateResults('GetComplied was Initiated', 'success');
	}

	function updateResults(event, style){
		$('#results ul').prepend('<li class="list-group-item montserrat text-white bg-'+style+'">' + event + '</li>');
	}
</script>

Copyright © Getcomplied 2018