Embedding Metrici pages in other websites

Sometimes you need to embed the content of the Metrici-provided page (such as a contact form) in another website (such as a client's website).

To enable this, you need to do two things:

  • You need to serve your page so that it has embedded support. The easiest way to do this is to serve it from a domain which uses a theme with embedded support, such as https://embed.metrici.com. If you need to write your own theme, look at the Embeddable theme for the additional resources required.
  • You will need to add code to the other website to serve the page.

In this example, we'll assume that the page you want to embed is available at https://embed.metrici.com/path/to/page.

There are different ways to embed the Metrici page into another website.

  • Method A - use the embed script. This is the easiest way of doing embedding, but you will need to be able to write a <script> element into your webpage. This will show the embedded page within the website page, and will automatically resize the embedded page so that all of it is visible.
  • Method B - use a placeholder and the embed script. This achieves the same as A. You don't need to be able to put a <script> into the body of your webpage, but you will need to add a script into the <head> instead.
  • Method C - use an iframe manually. This won't resize.

A) Using the script directly inline - recommended

Paste this where you want the embedded page to appear:

<script
  src="https://embed.metrici.com/embed.js"
  data-embed-src="https://embed.metrici.com/path/to/page"
  data-title="Contact form">
</script>

data-embed-src: the page to embed.

data-title (optional): accessible title for the iframe.

Do not insert an <iframe> element - the script does that for you.

Here is a full working example using this method.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Embedded content</title>
</head>
<body>
  <div style="width:800px;margin:0px auto;background-color:#EEE;padding:12px 24px;font-family:Non-serif;">
    <h1>Demo embed</h1>
    <p>
      Content before the iframe.
    </p>
    <div style="border:1px solid black;padding: 12px;background-color:white;">
    <script
      src="https://embed.metrici.com/embed.js" 
      data-embed-src="https://embed.metrici.com/metrici/documentation/devguide/web_development/embedding">
    </script>
    </div>
    <p>
      Content after the iframe.
    </p>
  </div>  
</body>
</html>

B) Using a placeholder + script

Place a placeholder where you want the content:

<div
  data-embed-src="https://embed.metrici.com/path/to/page"
  data-title="Contact form">
</div>

Then include the loader script either in <head> or in the <body> after the placeholder:

<script src="https://embed.metrici.com/embed.js"></script>

The script finds any element with data-embed-src and replaces it with a resized iframe.

C) Hand-code an iframe (no scripts allowed)

If your cannot add scripts to your webpage, you can embed the Metrici page using a fixed height iframe. It won’t auto-resize, so choose a height that fits your content.

<iframe
  title="Contact form"
  src="https://embed.metrici.com/path/to/page"
  style="border:0; width:100%; height:800px; display:block;"
  scrolling="auto"
  loading="lazy">
</iframe>

Tips:

  • Increase height if you see internal scrollbars. Decrease height if there is lots of blank space below the embedded page.
  • Keep border:0 for a clean, seamless look.

Notes

Metrici pages embedded in other pages do not show heading, title and footer areas. Only the content is shown. This is typically what you want for embedding forms and pages in other sites.

You can have as many embedded Metrici pages on a page as you like (you can even mix the different approaches).

The resize will stop working if the embedded page navigates away from the original domain (https://embed.metrici.com in our example).