Embed a Eurocode Widget on Your Site
Embed a Eurocode Widget on Your Site
Turn your website into a steel calculator. The FrameAI widget lets visitors test a beam against Eurocode without leaving your site — no FrameAI account required.
Before you start
The widget requires a **FrameAI Pro account**. Starter accounts do not have widget access. Upgrade at /settings/billing if needed.
Step-by-step
1. **Open the widget builder** — go to /integrations/widget in FrameAI.
2. **Choose your Eurocode module** — pick **Steel** (EN 1993-1-1), **Concrete** (EN 1992-1-1), or **Timber** (EN 1995-1-1). The module determines which checks the widget runs.
3. **Copy the embed code** — you get two snippets: a 4. **Paste into your website** — paste the code into your HTML wherever you want the widget to appear. 5. **Customise the colour** — find the 6. **Save and preview** — load your page and test the widget. A widget with labelled input fields (span, section size, loads) and a **Check Eurocode** button. Results appear inline on your page. **Widget shows but is broken** **Wrong Eurocode result for my country** **Widget doesn't fit on mobile** tag and a
- **WordPress**: Use a Custom HTML block
- **Webflow**: Add an Embed element
- **Squarespace**: Use a Code Block
- Any site that accepts raw HTML worksdata-widget-color attribute in the tag and set it to your brand hex code (e.g. #1a4f8a).What you should see
Common problems
Your site has a Content Security Policy (CSP) blocking third-party scripts. Add *.frameai.com to your CSP allowlist.
The widget defaults to pan-European EN values (no national annex). To use DIN (Germany), NEN (Netherlands), or any other national annex, set the data-annex attribute in the tag — e.g. data-annex="DE" for Germany.
The widget is fixed-width by default. Wrap it in a responsive container:html
<div style="max-width: 100%; overflow-x: auto;">
<!-- widget div here -->
</div>Embed options reference
Attribute Description Example data-moduleEurocode module steel, concrete, timberdata-annexNational annex code DE, NL, FRdata-widget-colorBrand hex colour #1a4f8adata-heightWidget height in px 600