There are two ways to embed Turtl content on your website or blog: the Turtl standard embed and the iframe embed. Which methods you can use depends on the type of content you're sharing:
Turtl Docs: Support both the Turtl standard embed (recommended) and the alternative iframe embed.
Published PDFs: Support both the Turtl standard embed (recommended) and the alternative iframe embed.
Landing pages: Iframe embed.
Let's take a look at both embed methods in detail.
Standard Turtl embed
Note: The Turtl standard embed is available for Turtl Docs and Published PDFs only. If you're sharing a Landing page, skip ahead to "iframe embed" below.
Accessing the share tools
First, you need to access the share tools. This can be done in a few different ways:
You can share your content immediately after you've published it by clicking on "Share now".
Or access the share tools from the content listing by clicking the drop-down menu and selecting "Share".
Finally, to access the share tools from within the editor, click on the drop-down menu and choose "Share".
Configure your embed
There are several options for customizing your embed:
Animation – choose how the embed should animate.
Size – choose the width and height of your embed.
More options – click here to configure advanced embed settings.
You can also link to a specific page by replacing the page number in the embedded code's URL.
Copy and paste the embed code
Your embed code will be generated automatically in the "Embed code" box. Copy and paste this into your CMS or website template, and your customized embed will appear.
Give it a try
Use the sample embed code below to try this out on your website:
<a class="turtl-embed" target="_blank" style="width: 340px; max-width: 100%;" data-turtl-embed-type="animation" data-turtl-link-text="Click to read" data-turtl-width="340" data-turtl-display-mode="lightbox" data-turtl-animation-mode="hover" data-turtl-color="#1eb1c7" data-turtl-story-id="5b68475dad01c03542b1e81b" href="https://team.turtl.co/story/content-psychology-101/?teaser=yes" title="Content Psychology 101">Click to read Content Psychology 101</a>
<!-- Please call embed.js only once per page -->
<script async type="text/javascript" data-turtl-script="embed" data-turtl-assets-hostname="https://assets.turtl.co" src="https://app-static.turtl.co/embed/turtl.embed.v1.js"></script>
Custom call-to-action (CTA) / custom button text option
The Turtl embed code can be modified to support a custom CTA mode, letting you fully control the button text or content shown in your embed.
This replaces the default "Click to read [story title]" label with your own message, ideal when you don't want to use the classic preview-style embed and prefer a custom call-to-action link instead.
Use a custom CTA when:
You don't want the default Turtl preview, but still want to link to your content.
You want to customize the text to match your brand tone or campaign (e.g. "Read the full guide" or "Explore now").
You'd like to control styling or layout, using your own HTML or CSS.
How to use it
Add data-turtl-cta="custom" to your <a> tag. This tells the embed script to use your own link text or HTML instead of generating a default label.
Here is an example of the modified embed code:
<a class="turtl-embed"
target="_blank"
style="width: 340px; max-width: 100%;"
data-turtl-embed-type="animation"
data-turtl-link-text="Click to read"
data-turtl-width="340"
data-turtl-display-mode="lightbox"
data-turtl-animation-mode="hover"
data-turtl-color="#173d41"
data-turtl-cta="custom"
data-turtl-story-id="68f10abd995f40be15d1d609"
href="https://team.turtl.co/story/content-psychology-101/?teaser=yes"
title="Content Psychology 101">
Read our 2025 Insights Report
</a>
<script async type="text/javascript"
data-turtl-script="embed"
data-turtl-assets-hostname="https://assets.turtl.co"
src="https://app-static.turtl.co/embed/turtl.embed.v1.js"></script>
Iframe embed
The iframe embed works for all Turtl content — Turtl Docs, Published PDFs, and Landing pages. We strongly recommend using the Turtl standard embed for Turtl Docs and Published PDFs where possible, but if that method doesn't suit your website, or you're sharing a Landing page, use the iframe method below.
Note: When embedding Turtl content using an iframe on a different domain, third-party tracking scripts, and subsequently form submission tracking, may not function reliably in all environments. This is due to browser restrictions on third-party cookies in cross-domain iframe contexts, particularly in privacy-focused browsing modes, strict tracking prevention settings, or incognito/private sessions.
To help ensure tracking works as expected, we recommend setting up a CNAME so that your Turtl content is served from your own domain. This allows cookies to be treated as first-party, which can improve tracking and form submission consistency.
For Landing pages, obtain the embed snippet directly from the share tools explained here.
To embed a Turtl Doc or Published PDF, add the following code into your website or CMS:
<iframe
width="680" height="446"
frameborder=0
allow="fullscreen" allowfullscreen="true"
src="https://team.turtl.co/story/content-psychology-101">
</iframe>
This doesn't need any scripts in order to function, so it can be useful if you do not have sufficient permissions within your CMS to use the full embed code.
The URL after the src attribute in the code above needs to be changed to point to any content you have created in Turtl. For Turtl Docs and Published PDFs, you can add the page number to the URL to link to a specific page.
You can also change the width and height to align the layout of the iframe embed with the layout of your website.
Notes:
With the iframe embed method, any UTM tags attached to the landing page will not be automatically passed over to the Turtl Doc and its analytics. Please contact support@turtl.co for more information on this.
For the best viewing experience, make sure the iframe renders properly on your website — we recommend following responsive web design best practices.