Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Javascript to dynamically include content on an Unbounce page
/* Example code - by Evan Donovan, public domain
Adjust the paths and selectors below as needed.
*/
/**
* Get HTML from another URL -
* Uses the vanilla JS XMLHttpRequest
* https://gomakethings.com/ditching-jquery/#get-html-from-another-page
* The first parameter is a URL to fetch, the second is the JS function that is called to handle the data that is received.
* @param {String} url The URL
* @param {Function} success Callback on success
* @param {Function} error Callback on failure
*/
var getURL = function ( url, success, error ) {
// Don't try to do XMLHttpRequest if browser doesn't support it
// All modern browsers should support this - see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Browser_compatibility
if ( !window.XMLHttpRequest ) {
return;
}
// Create new request
var request = new XMLHttpRequest();
// Setup callbacks
request.onreadystatechange = function () {
// If the request is complete
if ( request.readyState === 4 ) {
// If the request failed
if ( request.status !== 200 ) {
if ( error && typeof error === 'function' ) {
error( request.responseText, request );
}
return;
}
// If the request succeeded
if ( success && typeof success === 'function' ) {
success( request.responseText, request );
}
}
};
// Get the HTML via XMLHttpRequest
request.open( 'GET', url );
request.send();
};
/* The following examples invoke the function defined above. */
// Request the HTML for the menu from the page and write to the page.
getURL(
'http://www.example.com/unbounce-includes/menu.html',
function (data) {
// Find the menu container using an ID in the DOM.
// You will need to set this ID in the custom HTML of the Unbounce page.
var location = document.querySelector('#menu');
// write the content from the third party site into the page.
location.innerHTML = data;
}
);
// More complex example - shows how to replace a DOM element in an Unbounce page.
getURL(
'http://www.example.com/unbounce-includes/search-box.html',
function (data) {
// If there is a Google Custom Search container, remove it and insert a search box div.
// https://gomakethings.com/removing-an-element-from-the-dom-with-vanilla-js/
var elem = document.querySelector('#google-cse-searchbox-form');
// Create new element and add class: https://techstacker.com/posts/PwuXTgD87J8SWXwBQ
var newElem = document.createElement('div');
newElem.classList.add('search-box');
// Replace element that you selected with your new element
elem.parentNode.replaceChild(newElem, elem);
// Find the search box container by CSS class. This is the parent of the Google Custom Search.
var location = document.querySelector('.search-box');
// inject the new element into the DOM with the data obtained from the external site.
location.innerHTML = data;
}
);
// Example for replacing something that just has generic Unbounce classes.
getURL(
'http://www.example.com/unbounce-includes/contact-box.html',
function (data) {
// Find the contact box container.
var location = document.querySelector('.lplh-14');
// write the content from the third party site into the page.
location.innerHTML = data;
}
);
// Example of how to match an image and replace it with a div with a new logo.
getURL(
'https://www.example.com/unbounce-includes/cityvision-logo.html',
function (data) {
// match the first logo element on the page - https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/querySelector
// fuzzy matching courtesy of https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
var elem = document.querySelector('img[src*="cityvision-logo-v5"]')
var newElem = document.createElement('div');
newElem.classList.add('logo-container');
// Replace old logo element with new one
elem.parentNode.replaceChild(newElem, elem);
// Find the logo container.
var location = document.querySelector('.logo-container');
// write the content from the third party site into the page.
location.innerHTML = data;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment