Programmabledigital

Adding animations to Webflow, Framer, WordPress, Shopify and Squarespace

Paste a published animation's embed into the site builder you use, with step-by-step guides in the Share panel.

You can place a published animation on almost any site by pasting its embed. The Share panel has a short guide for each of the common site builders, and copies the right snippet for it.

Before you start

Open the animation, choose Share and Create share link. The embed is only available once the animation is published. Then pick your site builder in the Share panel's guides.

Webflow

  1. In the Designer, drag an Embed element (Add panel, Components) where the animation should go.
  2. Paste the one-line script embed and choose Save & Close.
  3. Publish. It shows on the published site and in preview, not in the Designer canvas.

Framer

  1. Insert an Embed component (Insert, Utility, Embed) and set its type to HTML.
  2. Paste the plain iframe snippet.
  3. Set the Embed's width to Fill and height to Fit content (the iframe keeps its shape), then publish.

WordPress

  1. In the block editor, add a Custom HTML block where the animation should go.
  2. Paste the one-line script embed.
  3. Update or publish. If your theme strips scripts, use the plain iframe snippet instead.

Shopify

  1. Go to Online Store › Themes › Customize, then open the page or template.
  2. Add a section (or block), choose Custom Liquid, and paste the plain iframe snippet.
  3. Save. The one-line script also works in Custom Liquid if you prefer it.

Squarespace

  1. Edit the page, add a block and choose Code.
  2. Paste the plain iframe snippet and turn off Display Source.
  3. Save. Code blocks with scripts need a Business plan or higher; the iframe works on every plan.

How it plays

The embed takes the Behaviour, Theme and Language you set in the Share panel. Scroll to play and matching the page's theme or language need the one-line script. Views, plays and watch-through from both kinds of embed show in Publish › Analytics. See Share links and embeds.

Building your own

To list your published animations from your own code or tool, use an API key and the API documentation. See API keys.