Follow

How to frame your Zerista site into your website using I-Frame

An iFrame is required to display a Zerista webpage on an external site.

The example code provided below should be used when embedding a webpage from Zerista. The javascript is used to resize the window appropriately, and the iFrame is used to display the webpage content. Before inserting code, the src on the iFrame must include the URL to the page you would like to embed.

The URL placed in this line of code should include an embedded query parameter set to true (ex, zeristacon.zerista.com?embedded=true).

Example javascript and iframe code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Embed Test Page</title>
<script type="text/javascript">
ZERISTA_MESSAGE_RESIZE = 'zeristaResize'
ZERISTA_MESSAGE_CLICK_TAG = 'zeristaClickTag'

function handleZeristaMessage(message)
{
if (!message.origin.match(/zerista/))
return

var parts = message.data.split(/:/)
var key = parts[0]
var value = parts[1]

if (key == ZERISTA_MESSAGE_RESIZE)
resizeIFrame(value)
else if (key == ZERISTA_MESSAGE_CLICK_TAG)
clickTag(value)
}

function resizeIFrame(height)
{
var iframe = document.getElementById('zerista_iframe')
iframe.style.height = height + 'px'
iframe.style.overflow = 'hidden'
}

function clickTag(tagName)
{
alert(tagName)
}

/* Hook up message event handler */
if (window.attachEvent)
window.attachEvent("onmessage", handleZeristaMessage)
else
window.addEventListener("message", handleZeristaMessage, false)
</script>
</head>
<body>

<p>IFrame:</p>
<iframe id="zerista_iframe" width="100%" height="700px"
src="YOURZERISTAURL.zerista.com?embedded=true">
</iframe>
</body>
</html>
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk