Embed LinkedIn Headline Writer to your website

Updated:

All AuthoredUp tools can be embedded on your website, blog, or Notion. That way, you, your clients or your community can use it in your own process and whenever needed. 🌟

There are 2 ways to embed LinkedIn Headline Writer.

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 widget directly into your site, on the same level as your other content. As user types into the editor, the widget will be able to freely grow and shrink vertically. This method offers the best user experience.

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

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

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.

So you can choose the second method:

Method 2: IFrame

The widget will be placed in an isolated box, which will not mix with the rest of your website. This method is maximally compatible, and should work whereever 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-headline-writer-embed.html"
  frameborder="0"
  style="width: 100%; height: 400px"
></iframe>

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

We would love to see how you use this tool, so send us a link or screenshot. 💫