Using Custom Code

Best Practices

Each of the tools Webflow provides are useful, but they are best used in different ways, depending what you are trying to achieve.

Here's a guide based on the type of custom code you're working with;

Inline SVGs

Inline SVGs are handled slightly differently by the web browser, in that they support currentColor.

• Use Embeds, where possible

For larger SVGs that cannot fit in an Embed, you'll need to store these in assets as files, and reference through an Image element. This loses the currentColor benefit, so you'll need to pre-color them.

JSON-LD

Used for technical SEO purposes to describe key aspects of your content.

• Use the before-body custom code area for page-level JSON-LD
• Use Embeds for Collection list item-level JSON-LD, such as FAQs
• Consider Microdata or RDFa instead for larger more complex rich data needs, since it's integrated directly into HTML

JavaScript

To do all the cool stuff;

• Use the before-body custom code area for page-level JavaScript
• Use the before-body site-side custom code area for site-wide JavaScript
• Use Embeds when you have specially-designed JavaScript that follows an element-referencing pattern. Sygnal uses this pattern when we want to integrate simple code directly in reusable components.

Mixed / widget code

For drop in widgets like calendly booking or Jotforms, you can use widgets to place them specially, and/or head/body code.

Read the instructions carefully to decide how to best integrate them.