How to Embed a Glitter AI Guide into an HTML Page Using an iframe

Learn how to embed a Glitter AI guide into any HTML page using an iframe. This guide includes steps on copying code snippets, making the guide public, and adjusting the height of the embedded guide.

09 Jan 2025 By Yuval Karmi

In this guide, we'll learn how to embed a Glitter AI guide inside any HTML page using an iframe. The process involves copying and pasting specific code snippets into your HTML file.

This involves three steps:

1. Pasting a code snippet into our HTML

2. Obtaining the Share Link for the Guide

3. Replacing Placeholder Text with the Link to the Guide

Let's get started

In this guide, we will learn how to embed a Glitter AI guide into any HTML page by using an iframe. Let's start by copying the code snippet and pasting it into your HTML page.

In your HTML page, where you'd like the guide embedded paste the following code:

And notice that here we have a placeholder text labeled "PASTE_SHARE_LINK_URL_HERE."

Let's replace that with the link to the guide we want to share.

Go into the guide your want to share:

Step #1: In this case, we'll pick "How to Replace a Screenshot in a Glitter" — In this case, we'll pick "How to Replace a Screenshot in a Glitter"

Step #2: Click "Share" at the top right — Click "Share" at the top right

Next, click on "Copy Link."

If prompted to make the link public, proceed to do so.
Private guides cannot be embedded, so ensure the guide is public before proceeding.

Step #3: Click "Copy Link" — Click "Copy Link"

Next, return to our code and press Command + V to replace the placeholder text with the desired URL.

Step #4: Choose "Make Public" — Choose "Make Public"

Step #5: Replace "PASTE_SHARE_LINK_URL_HERE" with the URL that was copied to the clipboard — Replace "PASTE_SHARE_LINK_URL_HERE" with the URL that was copied to the clipboard

That's it!