Guide · Webflow
Add a live animated heading to Webflow
Webflow's Code Embed element accepts any HTML, so a Vizyble word drops in like any other element: flowers that sway, follow the pointer and can be dragged. No app to install, no account needed.
<div data-vizyble-live="https://vizyble.dev/api/v1/live?word=HELLO&font=font-2&flowerSize=74&spacing=34&jitter=4&wordSize=46&verticalStretch=2&letterSpacingScale=4.55&lineSpacingScale=0.1" data-wind-speed="1.4" aria-label="HELLO"> <img src="https://vizyble.dev/api/v1?word=HELLO&font=font-2&flowerSize=74&spacing=34&jitter=4&wordSize=46&verticalStretch=2&letterSpacingScale=4.55&lineSpacingScale=0.1&fallback=1" alt="HELLO" style="width:100%;height:auto"> </div> <script src="https://vizyble.dev/embed/vizyble-live.js" defer></script>
Works as-is, no sign-up: a small “Vizyble” badge and 200 fresh renders a day per site. More styles in the builder; plans on pricing.
Steps
Make your snippet
Type your word in the box above and copy the snippet. It works as it is, with no key or sign-up. For more styles, use the builder on the docs page.
Add a Code Embed
In the Designer, open the Add panel and drag a Code Embed element to where the heading should go. Paste the snippet and save.
Set the width
The word fills the width of its parent and keeps its proportions. Wrap the embed in a Div Block and give that block the width you want, for example 100% on mobile and 800px on desktop.
Publish and check
Scripts don't run inside the Designer canvas, so the word won't move there. Publish, or open your staging site, to see it live.
Good to know
- Using several words on one page? Each snippet includes the script tag; keeping it in each is harmless, since every word is only brought to life once.
- If your site sets a Content Security Policy, allow vizyble.dev in script-src, connect-src and img-src.