Selma Widget
Accessibility widget for Webflow
Selma Widget gives visitors to your Webflow site a menu where they can adjust text, contrast and motion to their needs. You add one line of code under Custom Code, and your design stays as it is.
Why it suits Webflow
For sites where design and content are run by different people
Keep your design
The widget sits on top of what your designer has built in Webflow. No classes, components or interactions need to change to give visitors more ways to read.
Your editors' content is covered
As editors add pages and CMS items, the widget rescans the site every 24 hours, so new content also gets the automatic adjustments, and images without alt text get a description.
Reports for whoever builds the site
The monthly reports show what the widget has adjusted and how the menu is used, so your designer or agency knows what to fix in Webflow.
What is included
What your visitors get
Profiles for different needs
Ready-made profiles for low vision, cognitive needs and ADHD, among others, and a mode that stops flashing and moving content.
Own adjustments
The visitor can change text size, contrast, line spacing and the cursor, use a reading mask and stop animations.
Keyboard and screen readers
The widget improves focus and keyboard navigation and adds information that screen readers need, for menus, pop-ups and forms, for example.
Alternative text
Images without alternative text get a description written by AI.
The menu in 33 languages
The menu is available in 33 languages. The site's own content is not translated.
Loads after the page
The widget loads once the page is already showing, so it does not hold back the content.
Get started
How to add the widget
The widget is one line of code that you add once and that then loads on every page. It picks up its settings from your domain, so there is nothing else to change in Webflow.
- 1
Open Custom Code
Log in to Webflow, open the site's Settings and go to Custom Code.
- 2
Paste the code and publish
Paste Selma's code under Footer Code and click Save Changes. Then publish the site, and the accessibility icon appears.
Good to know
What the widget does not do
The widget makes the page easier to use for many visitors, but it does not replace fixing the issues in the code.
Outside what the widget does
- Your source code does not change. The adjustments exist in the visitor's browser, and if the widget is removed, they are gone.
- PDFs and other documents, captions for video and content from other domains in iframes
- Subdomains and services on other domains, such as booking or payment
- Mobile apps
Selma Bevakning helps your developers fix the issues in the code, and Selma Services carries out manual reviews and user tests.
Questions about Selma Widget and Webflow
- How do I add the widget to Webflow?
- Open the site's Settings and Custom Code, paste Selma's code under Footer Code and save. Then publish the site, and the widget loads on every page.
- Which Webflow plan do we need?
- A paid one. Custom Code is not available on the free Starter plan, but it is on the paid Site plans and with a paid Workspace plan.
- We saved the code but cannot see the widget. What is wrong?
- Webflow only runs custom code on the published site, not in the Designer preview. Publish the site and reload the page.
- Does the widget slow down my Webflow site?
- No. The widget loads once the page is already showing, so it does not hold back your content.
See the widget on your Webflow site
Book a demo and we will show you how the widget works on your website, and what it does not do.