1. Home
2. Learn to build on the Fastly platform
3. Tools
4. Fiddle

Embedding fiddles on other websites

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

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:

<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:

<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:

<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.

<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@Edge 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:

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

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

When in embedded layout and not the topmost browsing context (i.e. Fiddle is being displayed in an IFRAME), a postMessage will be dispatched to the parent frame when triggered by the following events: