<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Embed Codes</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Montserrat:400,700'
  rel='stylesheet' type='text/css'>
<body>


<style>

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
}

.embed-code {
  width: 100%;
  color: #18b7b7;
  border: 2px solid #cdcccc;
  border-radius: 5px;
  font-size: 1.0rem;
  padding: 0.6rem;
  box-sizing: border-box;
  margin-bottom: 2rem;
}

h2 {
  font-size: 1.5rem;
    margin-bottom: 2rem;
}

h3 {
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}

.main {
  padding: 1.5rem;
  max-width: 60rem;
}


</style>

  <div class="main">

  <h2>Embed codes</h2>

  <h3>1. Recommended</h3>
  <textarea class="embed-code">{{scriptTagEmbedCode}}</textarea>

  <h3>2. IFrame tag with remote auto-resize script</h3>
  <textarea class="embed-code" rows="3">{{iFrameWithRemoteResizeEmbedCode}}</textarea>

  <h3>3. IFrame tag with inline auto-resize script</h3>
  <textarea class="embed-code" rows="10">{{iFrameWithInlineResizeEmbedCode}}</textarea>

  <p>
    All types of embed codes are based on iFrames.
  </p>

  <p>
    To inject an embed for testing with Chrome's
    web developer tools:
    <ol>
      <li>
        Insert the iFrame part of the embed code (3)
        into the desired location in the page.
      </li>
      <li>
        Copy-paste the script part of embed code (3)
        into the console.
      </li>
    </ol>
  </p>

  <p>Resizing is based on <a href="https://github.com/davidjbradshaw/iframe-resizer">iframe-resizer</a>.</p>

  </div>

</body>

</html>
