Zerista iFrame

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="https://zeristacon.zerista.com/event?event_order=start&event_page=1&owner=other&owner_id=487363&embedded=true">
</iframe>
</body>
</html>