This article is also available in:

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

Open Embedding Settings
Simple Iframe Embedding
Create an Interactive Embed Script
Configure Display Options
Choose Preview Mode
Preview and Copy Code
Add Code to WordPress
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):

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

Using the Classic Editor:

Switch to "Text" mode (not "Visual")
Paste the embed code at the desired location
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:

Open your Webflow project in the Designer
Navigate to the desired page
Drag an "Embed" element from the Add Panel (shortcut: A) to the desired location
Double-click on the embed element
Paste the copied code into the code field
Click "Save & Close"
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.

Updated on: 21/01/2026

Was this article helpful?

Thank you!