Back to index

How to embed LinkedIn text staircase to your webiste?

Updated:

There are 2 ways to embed our free tool, the Text staircase generator.

This article will guide you through the process and explain the trade-offs of each so you can pick the best solution for your website or community.

Method 1: Direct embed

This method will place a widget directly on your site, on the same level as your other content. As the user types into the editor, the widget can freely grow and shrink vertically. This method offers the best user experience.

On the downside, some websites might not support direct embeds (for example, Notion). Also, your website's theme might "leak" into the widget under some circumstances, making it appear visually broken.

To embed the widget directly, paste the following snippet to your website's HTML code:

<script src="https://files.authoredup.com/aup-text-staircase-tool.js"></script>
<div id="aup-text-staircase-tool-root"></div>
<script>
  window.mountHeadlineWriter(document.getElementById('aup-text-staircase-tool-root'));
</script>

Method 2: IFrame

The widget will be placed in an isolated box, where it will not mix with the rest of your website. This method is maximally compatible and should work wherever embeds are supported.

On the downside, the widget will not be able to resize itself gracefully. You will have to determine its size ahead of time.

To proceed with iFrame embed, add the following snippet to your website's HTML code:

<iframe
  src="https://files.authoredup.com/aup-text-staircase-embed.html"
  frameborder="0"
  style="width: 100%; height: 400px"
></iframe>

Adjust the height of 400px to whatever value best suits your needs. Remember, just change the number, leave the px part intact!

Back to top