> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://helpdesk.webmag.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Embed Projects on Your Website

# Embed Projects on Your Website

With the embedding feature, you can display your Webmag projects directly on your own website. Visitors can experience your digital publications without leaving your site.

**Contents**

1. [Open Embedding Settings](#1-open-embedding-settings)
2. [Simple Iframe Embedding](#2-simple-iframe-embedding)
3. [Create an Interactive Embed Script](#3-create-an-interactive-embed-script)
4. [Configure Display Options](#4-configure-display-options)
5. [Choose Preview Mode](#5-choose-preview-mode)
6. [Preview and Copy Code](#6-preview-and-copy-code)
7. [Add Code to WordPress](#7-add-code-to-wordpress)
8. [Add Code to Webflow](#8-add-code-to-webflow)


# 1. Open Embedding Settings

Open your project and navigate to the project settings. Select the **"Embedding"** tab. Here you'll find all options to configure your embed code.


# 2. Simple Iframe Embedding

For quick embedding without additional features, you can use the **Iframe Link**. This is suitable when you want to display the project directly without click interaction.

Copy the iframe link using the copy icon next to the text field and insert it into the iframe on your website.

**Example:**
```
<iframe src="https://v2.webmag.io/embed/iframe/embed.html?id=123456789"></iframe>
```


| **Note:** The simple iframe displays the project directly but offers fewer design options. For a more attractive presentation with preview images and animations, we recommend the interactive embed script (see next section).


# 3. Create an Interactive Embed Script

In the **"Create your embed script"** section, you can configure the appearance and behavior of your embed. The embed initially displays an attractive preview of your project. Visitors click on this preview to open the full project.

| Option | Description | Example |
| ---- |
| **Link Text** | Text displayed above the embedding. Leave empty if you don't want any text. | "Click to read" |
| **Link Animation** | Animation of the link text | Bounce Animation |
| **Link Color** | Color of the link and accents | Red |
| **Display Mode** | How the project opens | In a modal window |
| **Hover Animation** | Effect when hovering with the mouse | Zoom |


# 4. Configure Display Options

Adjust the size of the embed area to fit your website:

**Embed Width**
Enter a width in pixels (e.g. "500px"). To fit the width to the container, enter "100%".

**Max Modal Width**
Enter a maximum width for the modal window. Leave empty for no limit.

**Max Modal Height**
Enter a maximum height for the modal window. Leave empty for no limit.

**Embed Height**
The height of the preview area in pixels (e.g. "500px"). This option only appears when using the automatic preview mode.



# 5. Choose Preview Mode

You have two options for how the preview of your project is displayed:

**Option A: Automatic Preview (Default)**

When the option **"Do you want to use a screenshot?"** is disabled, an interactive preview is automatically created from the project data and images. This preview shows a live view of your project.

**Option B: Custom Preview Image**

Enable **"Do you want to use a screenshot?"** to upload your own preview image. This is recommended when:

* You want to use a specially designed teaser image
* Page load time should be minimized
* The preview design should match your website exactly

After activation, you can upload your own image via the upload area. Alternatively, the automatically generated cover image of your project will be used.


# 6. Preview and Copy Code

In the **"Preview"** section, you can see a live preview of how the embed will look on your website. Check here if all settings meet your expectations.

The finished code is displayed in the **"Dynamic Code"** field. Click the **copy icon** next to the text field to copy the code to your clipboard.

| **Important:** Always copy the entire code including the `<script>` tag at the end. The script is required for the embed to work.


# 7. Add Code to WordPress

**Using the Block Editor (Gutenberg):**

1. Open the page or post where the project should appear
2. Click the **+** icon to add a new block
3. Search for **"Custom HTML"** and select this block
4. Paste the copied embed code into the text field
5. Click **"Preview"** in the block to check the embed
6. Save or publish the page

**Using the Classic Editor:**

1. Switch to **"Text"** mode (not "Visual")
2. Paste the embed code at the desired location
3. Save or publish the page

| **Note:** Some WordPress themes or security plugins block external scripts. If the embed doesn't work, contact your website administrator or hosting provider.


# 8. Add Code to Webflow

**Adding an embed to a page:**

1. Open your Webflow project in the Designer
2. Navigate to the desired page
3. Drag an **"Embed"** element from the **Add Panel** (shortcut: A) to the desired location
4. Double-click on the embed element
5. Paste the copied code into the code field
6. Click **"Save & Close"**
7. Publish the website

**Using an embed in a Collection page:**

If you want to use the embed in a CMS template, add the embed element within the Collection structure and adjust accordingly.

| **Tip:** In Webflow, you can style the surrounding embed element with CSS to perfectly fit your design. For example, set a maximum width or center the element.




**Frequently Asked Questions:**

**Can I embed multiple projects on one page?**
Yes, simply add multiple embed codes one after another. The `<script>` tag only needs to be included once at the end of the page.

**The embed is not displaying – what can I do?**
Check if external scripts are allowed on your website. For Content-Security-Policy restrictions, `v2.webmag.io` must be added as an allowed source.

**Can I customize the appearance of the embed with CSS?**
You can set the basic options through the settings. For further customization, you can style the surrounding element with your own CSS.