Embedding a project is a great way to share interactive, visual content with your audience. Not only will the viewers be more likely to engage with your content, but they will also spend more time on your website. Each project has an individually generated embed code.
Embed code options
- Responsive (Async): The embedded project will adjust to its container and adapt to the size of the screen your project is viewed on. This is an optimized responsive embed code.
- Responsive: The embedded project will adjust to its container and adapt to the size of the screen your project is viewed on.
- Fixed: The embed size will be fixed. Note that your project size may vary across platforms—with this code, the embed size will not adapt to its container.
- AMP: Use this code to embed on AMPs (Accelerated Mobile Pages). For more steps, check out the article about Embedding on AMP pages.
- WordPress: To embed into WordPress, you'll need to install a plugin. The Infogram plugin is currently compatible with WordPress version 5.6 or newer.
Accessing the embed codes
- Open the project editor and click the Share... button in the top right corner of the screen, or simply click on the icon at the bottom right corner of the project thumbnail in your Infogram library.
- Click on the Embed tab to access Responsive (Async), Responsive, Fixed, AMP, and WordPress embed codes.
Note: If you want to embed your project transparently—with a transparent background that would match your web page's background—there's a setting you can enable here.
- Copy one of the provided codes and paste it into the text editor of your CMS or any other interface that allows you to write HTML. Be careful not to paste it in the visual view, or the actual code will show in your article. Always paste the code into the Text or HTML view.
Note: Sites like Tumblr and Squarespace remove script tags. You will have to use the fixed embed code that places the content in an iframe.