---
title: Embedding fiddles on other websites
summary: null
url: https://www.fastly.com/documentation/reference/tools/fiddle/embedding
---

It's possible to embed fiddles in another page (e.g., in documentation or a blog post). They show up like this:

[Try it in Fastly Fiddle](https://fiddle.fastly.dev/28f73aba)

To do this, click the **Embed** option in the menu in the top right of the Fiddle web interface, and follow the instructions. You will import the Fiddle embed client at the end of your page:

```html
<script async defer src="https://fiddle.fastly.dev/embed.js"></script>
```

Then, where you want the fiddle to appear, link to an existing fiddle with an `/embedded` extension, and it will be converted into an inline-embedded, interactive fiddle:

```html
<p><a href='https://fiddle.fastly.dev/fiddle/d629eb91/embedded'>Go look at this fiddle</a></p>
```

If you prefer to capture the fiddle data immutably in the host page, you can use a `<script>` tag to define a JSON data model for the fiddle:

```html
<script type='application/json+fiddle'>
{
  "title": "Beacon termination at the edge",
  "origins": ["https://httpbin.org"],
  "type": "vcl",
  "src": {
    "recv": "if( req.url ~ \"beacon\" ) {\n  error 950 \"Fastly Internal\";\n}",
    "error": "if (obj.status == 950) {\n  set obj.status = 204;\n  set obj.response = \"No Content\";\n  synthetic {\"\"};\n  return(deliver);\n}"
  },
  "requests": [
    {
      "path": "/beacon?some=1&log=2&parameters=3&in=4&the=5&querystring=6",
      "method": "GET"
    }
  ]
}
</script>
```

## Choosing the default tab

Unlike the main Fiddle UI, embedded fiddles show only one source file at a time. To select a specific file, add a `data-default-src="..."` data attribute to the `<a>` or `<script>` tag defined above.

```html
<p>
  <a href="https://fiddle.fastly.dev/fiddle/d629eb91/embedded" data-default-src="error">
    Look at the error subroutine of this fiddle
  </a>
</p>
```

VCL fiddles have one source file per VCL subroutine: `recv`, `hash`, `miss`, `hit`, `pass`, `fetch`, `deliver`, `error`, `log`, and one for declarations called `init`. If no default tab is specified, the first non-empty source will be the active tab when the embedded fiddle loads.

Compute fiddles have `main` for the program source code and `deps` for dependencies. If no default tab is specified, `main` will be the active tab when the fiddle loads.

## Script-less embedding

The embed client handles automatically resizing the iframe to fit the fiddle, and provides placeholder content while the fiddle is loading, but if you prefer not to load the `embed.js` client, you can create an `IFRAME` yourself and set the `href` attribute to the fiddle URL with `/embedded` appended, like this:

```html
<iframe href="https://fiddle.fastly.dev/fiddle/d629eb91/embedded"></iframe>
```

The full set of options which can be passed as query parameters is:

| Param        | Example    | Description                                                                                                                                                                                                                                                                                                                                                                                                                |
| ------------ | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `defaultSrc` | `recv`     | The source tab which should be selected and displayed when the fiddle loads.                                                                                                                                                                                                                                                                                                                                               |
| `embedID`    | `172636`   | An arbitrary number which Fiddle will send back in any `postMessage` for identification.                                                                                                                                                                                                                                                                                                                                   |
| `tabs`       | `srcs,run` | A comma separated list of tabs to display on the tab bar. Valid options include all the source names individually (for VCL fiddles, `recv`, `hash`, `hit`, `miss`, `pass`, `fetch`, `error`, `deliver` and `log`, and for Compute fiddles, `deps` and `main`), the names of the functional tabs `run`, `install` and `info`, and the special alias `srcs`, which expands to all the source names that apply to the fiddle. |
| `edit`       | `1`        | When displayed in embedded mode, fiddles are read-only by default. However, if the fiddle is not locked or frozen, this parameter will make it editable.                                                                                                                                                                                                                                                                   |

When in embedded layout and not the topmost browsing context (i.e. Fiddle is being displayed in an IFRAME), a [`postMessage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) will be dispatched to the parent frame when triggered by the following events:

| Event     | Message properties         | Description                                                                                                                                                                                              |
| --------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `resize`  | `embedID`, `contentHeight` | The content of the embed has changed in height.                                                                                                                                                          |
| `execute` | `embedID`                  | The fiddle is executing.                                                                                                                                                                                 |
| `result`  | `embedID`, `result`        | The result data has changed (note that because Fiddle instrumentation is collected asynchronously, this may be triggered multiple times following an execute event, as the result data gradually builds) |
