Add your interactive image to any website

WordPress

1. 1Open the page or post in the WordPress editor.
2. 2Click + and add a Custom HTML block where the image should appear.
3. 3Paste the code into the block. In newer WordPress versions, click Edit HTML first, paste the code and click Update.
4. 4Click Save (or Publish), then open the page or Preview to see the interactive image.

You need an Administrator or Editor account, otherwise WordPress removes the script. Classic editor: paste the code in the Code tab (called Text in older versions). On WordPress.com, scripts only run on a paid plan with hosting features activated.

Elementor

1. 1Edit the page with Elementor.
2. 2Drag the HTML widget to where the image should appear.
3. 3Paste the code into the HTML Code field.
4. 4Click Publish (or Update).

By default only administrators can use the HTML widget; other roles can be allowed in Elementor's Role Manager.

Shopify

1. 1In your Shopify admin, go to Online Store and click Edit theme (in some admins: Customize).
2. 2Open the page or template where the image should appear, for example the home page or a product template.
3. 3Click Add section and choose Custom Liquid.
4. 4Paste the code into the Liquid code field and click Save.

Custom Liquid is included in Shopify's free themes such as Dawn and in most Online Store 2.0 themes.

Wix

1. 1Open your site in the Wix Editor.
2. 2Click Add Elements (+) → Embed Code → Popular Embeds → Embed HTML.
3. 3Click Enter Code, paste the code and click Apply.
4. 4Drag the corners of the box until the whole image fits, then click Publish.

Wix shows embedded code in a box with a fixed size: if the image is cut off, make the box taller. In the new Wix Harmony editor: + Add → Elements → Embed → Embed code, then the settings icon and Enter HTML embed code.

Squarespace

1. 1Edit the page and click Add Block where the image should appear.
2. 2Choose Code, then click the pencil icon on the new block.
3. 3Paste the code, keep the mode on HTML and leave Display Source off.
4. 4Click outside the block and Save the page.

Squarespace runs scripts in Code Blocks only on the Core, Plus or Advanced plan. While you're logged in the image may not show; check the live page or a private window.

Webflow

1. 1Open the page in the Webflow Designer.
2. 2Open the Add panel and drag a Code Embed element onto the page.
3. 3Paste the code and click Save & Close.
4. 4Publish the site. The image appears on the published site; the Designer shows a placeholder.

Code Embed needs a paid Site plan or a paid Workspace (Core, Growth, Agency or Freelancer).

Framer

1. 1Open the page in Framer.
2. 2Click Insert and add an Embed component.
3. 3Open the embed's HTML tab and paste the code.
4. 4Resize the embed so the whole image fits, then Publish. Scripts only run on the published site, not in the editor.

Google Sites

1. 1Open your site in Google Sites.
2. 2Click Insert → Embed and switch to the Embed code tab.
3. 3Paste the code, click Next, then Insert.
4. 4Resize the box so the whole image fits, then Publish.

HTML

1. 1Open your page's HTML file or template.
2. 2Paste the code where the image should appear, inside <body>.
3. 3Save and upload the page.

Several images on one page: add one <div class="iactiveImg" data-ii="…"></div> per image. The <script> line is needed only once.