Labelling AI images in Webflow

Add the script tag

<script src="https://www.ai-label.app/widget.js" defer></script>

Webflow offers custom code for the whole site and for single pages. For the widget, use the whole site:

1. Open Site settings and go to Custom code.
2. Paste the script tag into the head code field.
3. Save and publish the site.

Check that your Webflow plan includes custom code.

Mark images

Which images need a label is your decision, for example with the labelling check. The widget only labels marked images, in three ways that can be combined:

• Attribute on the image: data-ai-label="generated" for images created entirely with AI, data-ai-label="modified" for photos edited with AI.
• File name with a marker before the extension: vase--ai.jpg or vase--ai-mod.jpg.
• Alt text ending in “(AI-generated)” or “(AI-modified)”.

In Webflow, a custom attribute is the easiest way, because Webflow lets you add any attribute to an element. Select the image, open its element settings and add data-ai-label under custom attributes, with the value generated or modified. The second layer works the same way with data-ai-parts, for example with the value background.

For images from a CMS collection, alt text is often more practical. You maintain it in the CMS item or the image settings. A file name with --ai also works if it reaches the image address; the page source shows whether it does.

Pitfalls

• Components: an attribute on an image inside a component applies wherever the component is used. Only mark images there that are AI images everywhere.
• Responsive images: Webflow serves images in several sizes. The widget also checks srcset; the attribute and alt text sit on the element anyway.
• Interactions: images that fade in get their label once they are visible and large enough. Check sliders and tabs.

Limits of the widget

• The widget only reaches <img> elements on pages with the script. Background images from the stylesheet and images under 48 pixels (adjustable with data-min) stay unlabelled.
• Webflow e-commerce: check cart and checkout.
• It cannot reach emails such as order confirmations. For images outside your website, create a copy with the label burned in using Label an AI image.
• Privacy: when the script loads from ai-label.app, our host sees the IP address, as with any request. The script sets no cookies. Mention it in your privacy policy.

Native app

A dedicated Webflow app is planned. There is no date yet.