---
title: Embed a Eurocode Widget on Your Site
slug: eurocode-widget
summary: "Put a little FrameAI checker box on your own website — clients can test a beam without leaving your site."
youll_need:
  - "FrameAI Pro account"
  - "A website where you can paste an HTML snippet"
  - "~10 minutes"
steps:
  - "Go to /integrations/widget in FrameAI"
  - "Choose your Eurocode module (steel, concrete, or timber)"
  - "Copy the embed code (a <script> tag and a <div>)"
  - "Paste it into your website's HTML (WordPress, Webflow, Squarespace — any HTML works)"
  - "Customise the widget colour to match your brand (hex code field)"
  - "Save and preview"
what_you_should_see: "An embedded calculator widget on your website with input fields for loads and a 'Check Eurocode' button"
common_problems:
  - "Widget shows but is broken: You have a Content Security Policy (CSP) blocking our script — add *.frameai.com to your CSP allowlist."
  - "Wrong Eurocode result: The widget uses the pan-European EN default — to use your national annex (e.g. DIN for Germany), set the annex code in the widget config."
  - "Widget doesn't fit on mobile: Wrap it in a responsive container (max-width: 100%) — it's not auto-responsive."
video_slug: eurocode-widget
category: integration
locale: en
---

## 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 `<script>` tag and a `<div>`. Both are required.

4. **Paste into your website** — paste the code into your HTML wherever you want the widget to appear.
   - **WordPress**: Use a Custom HTML block
   - **Webflow**: Add an Embed element
   - **Squarespace**: Use a Code Block
   - Any site that accepts raw HTML works

5. **Customise the colour** — find the `data-widget-color` attribute in the `<script>` tag and set it to your brand hex code (e.g. `#1a4f8a`).

6. **Save and preview** — load your page and test the widget.

### What you should see

A widget with labelled input fields (span, section size, loads) and a **Check Eurocode** button. Results appear inline on your page.

### Common problems

**Widget shows but is broken**
Your site has a Content Security Policy (CSP) blocking third-party scripts. Add `*.frameai.com` to your CSP allowlist.

**Wrong Eurocode result for my country**
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 `<script>` tag — e.g. `data-annex="DE"` for Germany.

**Widget doesn't fit on mobile**
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-module` | Eurocode module | `steel`, `concrete`, `timber` |
| `data-annex` | National annex code | `DE`, `NL`, `FR` |
| `data-widget-color` | Brand hex colour | `#1a4f8a` |
| `data-height` | Widget height in px | `600` |