Embed your sampling journey directly onto your website

In this guide, you'll learn how you can embed a SoPost landing page onto another website using a simple snippet of code. Let's get started...

Embedding the page

Using HTML's iframe tag, it's easy to embed a landing page onto another website. Add the example code to the page of your website where you'd like to embed the page, replacing {insert_URL} with your SoPost landing page URL.

SoPost will provide you with your landing page URL.

Example embed code

<iframe id="sopost-embed" src="{insert_URL}" width="400" height="900" frameborder="0" marginheight="0" marginwidth="0" sandbox="allow-scripts allow-same-origin allow-forms" referrerpolicy="origin-when-cross-origin">Loading…</iframe>

Height and width

You can change the height and width of the iframe on the page using the height and width attributes within the code snippet. This is set in pixels.

Adjusting the height of the iframe automatically (optional)

To automatically adjust the height of the iframe based on the consumer's screen size, you can listen for a postMessage event that will tell the page you're embedding the landing page onto what the size should be set to. The event data sent to the page is called iframeHeight. This value will be the size of the full height of the page in pixels.

Here is some example code your development team can use as a starting point to automatically adjust the height of the iframe.

window.addEventListener("message", (event) => { if (event.data?.type === "iframeHeight") { const iframe = document.getElementById("sopost-embed"); // Replace with your iframe ID if (iframe) { iframe.style.height = `${event.data.height}px`; } } });

Sandbox attribute (optional)

If the site you're embedding on has strict security policies, you may need to add the following into the sandbox attribute:

allow-scripts
allow-same-origin
allow-forms

ℹ️ Important: Ensure SoPost are aware of the website domain that the page will be embedded on to ensure it loads.