There are two ways to promote your Turtl Doc on your company website or blog: Turtl standard embed (recommended) and alternative iframe embed. Let's take a look at both in detail.

Turtl standard embed

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 Turtl Doc immediately after you've published it by clicking on "Share now".

Or access the share tools from within the Turtl Docs listing by clicking on 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.

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>

Alternative iframe embed

We strongly suggest using the standard embed, but if, for some reason, the above method is not good for your website, you can use a direct iframe embed*.

This can be achieved by pasting 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 the attribute in the code above needs to be changed to point to any content you have created in Turtl.

Also, please note you can change the width and the height in order to align the layout of the iframe embed with the layout of your website.

Notes:

Please note that 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, a website embedding a Turtl Doc in an iFrame needs to make sure the iframe renders properly, e.g. we advise customers to follow the best practices of responsive web design.

How to use the embed code sharing asset