Embedding your Infogram project is a great way to bring interactive and visually engaging content directly to your audience and keep visitors on your page longer.
Each project has a unique embed code. Infogram's latest embed option, the Responsive IFrame is a script-free code that:
- automatically adjusts the embedded content to the full width of its container and dynamically sets the height to fit the content perfectly, ensuring it adapts to different screen sizes without scrollbars;
- has improved compatibility with a wider range of website platforms and content management systems that may have limitations with script-based embeds.
Accessing the embed codes
-
To open the Share dialog, you have two options:
-Within the project editor, click the Share button in the top right corner,
-From the project library, hover over the project thumbnail. Click the three-dot icon that appears, and then select Share & Embed (available for published projects).
- If your project is a draft, you'll need to publish it to generate an embed code. You can either make it Public on the web or enable a Private link.
-
To copy the code, simply click the copy icon located within the Embed code field in the Share dialog.
- If you wish to embed your project with a Transparent background that seamlessly blends with your webpage's background, you can enable this option with the toggle below the embed code.
- You can also use the settings below to restrict embedding to specific domains for added security.
- Paste the copied embed code directly into the text editor (or HTML view) of your CMS or any platform that supports HTML input. Avoid pasting it into the visual editor, as this will display the code itself rather than the embedded project.
Using Legacy codes
If you have established a workflow that relies on our previous embed code options, rest assured, all previously embedded content using these legacy codes will continue to function without any changes. Legacy codes are also generated for all new projects.
To access these other embed code options, click Legacy codes in the Share dialog.
Here's a breakdown of the legacy embed code options:
- Responsive (Async): This embed code uses JavaScript to dynamically adjust the embedded project to the full width of its container and adapt its height to fit the content. The embed is loaded asynchronously and only when it enters the viewport, reducing initial page load time. This is especially beneficial if you have several embeds on the page.
-
Responsive: Similar to the Async version, this code also adjusts to the container size.
- Fixed: This IFrame option provides a static embed size that will not adapt to different screen sizes or containers.
- AMP: Use this code to embed on AMPs (Accelerated Mobile Pages).
- WordPress: If you use an older WordPress version, you can use the shortcode in the WP visual editor.
Embedding Responsive layout projects
If you've created a project using the Responsive web and mobile layout — Infogram's simpler editor — the default embed code will be Embed (Script), the Responsive Async code.
If your CMS or platform does not support embedding scripts, you will need to use a different project type from the template editor to obtain a compatible iframe-only embed code. Learn more about how to create a new template project.
Embedding projects with a mobile layout
If you've added a mobile layout to your template project, you will also see the Embed (Script) as a default code (the Responsive Async code). This is because the mobile layout feature requires a script-based embed code to function correctly.
If your CMS or platform does not support embedding scripts, you will need to remove the mobile layout feature to get a compatible iframe-only embed code.