Blog / Design

How to embed interactive illustrations in Framer, Webflow and WordPress

Interactive illustrations used to mean a developer, a JavaScript library and a deploy. With an embed snippet you can paste one into a site builder in a minute. Here is exactly where it goes in Framer, Webflow and WordPress, and how to fix the usual problems.

By Abdullah NomanOctober 16, 20263 min read

Code snippet card, hairline isometric illustration

Every interactive embed works the same way: a placeholder element where the illustration should appear, and a script that fills it. Site builders differ only in where you paste those two pieces. This guide uses Liniqo Live as the example, but the steps apply to most embed snippets.

<div data-liniqo="sandbox"></div>
<script src="https://liniqo.com/live/embed.js" async></script>

The div marks the spot and names the figure. The script loads once per page, finds every data-liniqo element and draws the figures into them as they come near the screen.

Get the code

  1. Open the interactive figures in the library and pick one.
  2. Set the accent and line colours. The embed code updates to match.
  3. Click Copy embed code.

The 23 free figures work anywhere straight away. For the other figures, which come with Pro and Lifetime, the copied code includes a token tied to your licence, so copy it from the library with your licence active.

Framer

  1. Open the Insert menu, search for Embed and drag the Embed component onto the canvas.
  2. Paste the whole snippet, div and script, into its HTML field.
  3. Size the Embed frame to a 5:4 shape, for example 480 × 384, so the figure fills it.

Framer's help article How to add an iframe or embed script describes the same Embed component. If you place several figures on one page, each Embed can contain the full snippet; the script only runs once.

Webflow

  1. Open the Add panel and drag a Code Embed element where the figure should go.
  2. Paste the snippet and save.
  3. Give the Code Embed, or a div wrapped around it, a width and a 5:4 shape (an aspect ratio or a fixed height) in the Style panel.
  4. Publish or preview to see it.

Two things trip people up, both from Webflow's Code Embed docs: scripts do not run inside the Designer, so you see a placeholder until you preview or publish; and custom code needs a paid Workspace or Site plan. The snippet is far below the 50,000-character limit per embed.

If you use figures on many pages, you can put the <script> line once in the site's custom code footer and use only the div in each Code Embed.

WordPress

  1. In the block editor, add a Custom HTML block.
  2. Paste the snippet and click Preview in the block toolbar.
  3. Update the post and check it on the live page.

If the script disappears when you save, your account lacks WordPress's unfiltered_html capability, which strips <script> tags. On a single site, admins and editors have it by default. On multisite, only super admins do. Either ask an admin to add the script line to the theme's footer, or use a header-and-footer plugin for the script and keep only the div in the post.

Any other HTML page

Paste the div where the figure should appear and the script anywhere after it, or once before </body>. Squarespace, Wix, Carrd, Ghost and other builders all have some form of code or HTML block that works the same way.

Live figure: move your pointer across it, or drag a finger on a phone. Coins is one of 23 free interactive figures.

Sizing

Figures fill the width of their container and draw into a 5:4 box. Control size from the container:

<div style="max-width:480px; aspect-ratio:5/4">
  <div data-liniqo="coins"></div>
</div>

Colours and dark mode

AttributeWhat it does
data-accentThe bright highlight colour, usually your brand colour
data-lineThe main line colour
data-bgThe plate behind the drawing; set it to your section background
data-themelight or dark; without it, a figure goes dark when an ancestor has the class dark or data-theme="dark"
data-intensityHow strongly the figure responds, from 0 to 1 (default 0.5)
<div data-liniqo="coins" data-theme="dark" data-bg="#0e1013" data-accent="#22c55e"></div>

If nothing shows

  • In the builder canvas: normal in Webflow; preview or publish.
  • The container has no height: give it a width and aspect-ratio: 5 / 4.
  • The script was stripped: check the saved HTML; see the WordPress note above.
  • A Pro figure stays empty: copy the embed code again from the library with your licence active, so it carries your licence token.
  • Still nothing: open the browser console. Messages starting with [liniqo] say what went wrong, such as a misspelt figure name.

For still illustrations in the same builders, see Isometric illustrations in Figma, Framer and Webflow.

Questions

How do I add custom HTML or a script in Framer?

Insert the Embed component from the Insert menu, paste the code into its HTML field, and size the frame to fit the figure.

Why does my embed not show in the Webflow Designer?

Webflow does not run scripts inside the Designer. Preview or publish the site to see the embed working.

Why does WordPress remove my script tag?

Users without the unfiltered_html capability have script tags stripped on save. On multisite only super admins have it by default. Ask an admin, or add the script site-wide with a header and footer plugin.

Can I use several interactive figures on one page?

Yes. Add one div per figure. The script only needs to load once, and each figure loads when it nears the screen.

Keep reading

Design · 3 min readHow to build an interactive hero section that stays fastLayout, what the visual should show, how to load it and what to do on phones, with a copy-paste example.
Development · 3 min readInteractive illustrations in React and Next.jsLoad the script once, wrap the figure in a component, theme it from props and avoid hydration surprises.
Design · 3 min readHow to use isometric illustrations in Figma, Framer and WebflowImport, recolour and ship SVG isometric illustrations in Figma, Framer and Webflow.