Custom code snippets in Webflow without breaking the Designer

A custom snippet should have a clear job. It might connect a form, initialise a slider or add behaviour the visual tools don’t cover. Trouble starts when nobody remembers where it was installed, what it depends on or whether another snippet already does the same thing.

Before adding code, I want three answers: which pages need it, which elements it controls and how we’ll know when it has stopped working.

Give each piece of code a home

Webflow has site-level code, page-level code and code embeds. Use the smallest scope that fits the requirement.

Requirement	Likely location
Metadata or a stylesheet used throughout the site	Site head code
Behaviour present on every page	Shared script, loaded once
A feature on one landing page	Page-level code
Markup for one custom element	Embed near that element

An external classic script with defer waits until the document has been parsed, and it keeps its order relative to other deferred classic scripts. async doesn’t guarantee that order. Use it when the script is independent, not just because it sounds faster.

An inline classic script doesn’t gain the same deferred behaviour by adding a defer attribute. Placement and initialisation still matter, and the MDN script element reference explains the details.

Select elements deliberately

Use a dedicated attribute when a script needs a stable target. Styling classes are likely to change during a redesign.

For example, a card can keep its normal Webflow classes and also carry a separate data-expand-card hook. That makes it clear which parts of the markup belong to the behaviour.

Also handle absence. A shared script shouldn’t throw an error because a particular page has no matching cards.

This small example toggles a details region. It assumes the HTML already includes a button with aria-controls pointing to the region’s ID:

document.querySelectorAll('[data-details-toggle]').forEach((button) => {
  const panel = document.getElementById(button.getAttribute('aria-controls'));
  if (!panel || button.dataset.initialised === 'true') return;

  button.dataset.initialised = 'true';
  button.setAttribute('aria-expanded', String(!panel.hidden));
  button.addEventListener('click', () => {
    panel.hidden = !panel.hidden;
    button.setAttribute('aria-expanded', String(!panel.hidden));
  });
});

Load it after those elements exist. A real feature also needs keyboard, styling and content checks. This only covers the toggle behaviour.

Stop two owners controlling one feature

If Webflow’s interactions and a custom script both change an element’s transform, the result depends on which one runs last. If a library is loaded globally and again inside a component embed, it may initialise twice.

Keep a small inventory with the feature, the script location, its dependency, its version and its owner. Before adding a slider or animation library, search the existing code and embeds for one already in place.

Never put a private API key in browser code. Hiding it in an embed or minifying the script doesn’t keep it secret. Requests that need private credentials belong in a controlled server-side service.