Web Studio | Agility Docs

Web Studio provides an in-product area for preview, collaboration, visual editing, and dynamic screen size comparisons for production and staging content.

How Does It Work?

Web Studio brings your preview and production deployments into Agility via an iFrame. From there, we allow you to adjust zoom, virtual screen size, and so much more.

You can even enable Commenting Mode in the top toolbar, which allows you to start conversation threads right on-top of your preview for added context.

Note: You may need to adjust the Content-Security-Policy header of your site to allow the app.agilitycms.com host. MDN has more information on how to do this here.

Web Studio SDK

You don't need to install anything to start taking advantage of Web Studio. As long as you've setup your various Deployments for your Sitemaps with the correct URL (located in the Settings section) you should be good to go. To unlock the full experience you'll need to install and configure the Web Studio SDK. Let's explore what that means.

Web Studio SDK: https://github.com/agility/web-studio-sdk.

Out of The Box - No SDK Installed

Even if you don't have the SDK installed, you'll be able to preview your deployments in-product (hooray for fewer tabs!). What you'll be missing is the connectivity between your website and the Agility UI. This means Agility won't be able to track what URL you're on as you navigate throughout your site, your scroll position in commenting mode, nor will we be able to outline individual components or fields in your preview window or show live updates to them.

Script Tag Installed

Once you install the script tag for the Web Studio SDK, we'll be able to track what URL you've navigated to inside the preview frame,so we can "follow along" with where you are on each page.

We'll also be able to track the scroll position of your window in conversation mode, making it much easier to start threads with better visual acuity.

We still won't be able to show you which components and fields are on that page, however. For that you'll need to have your...

Component and Fields Decorated - Live Editing

By decorating your components and fields in the code of your website, you indicate to Agility where each component is, and where the fields are. That enables a hover animation on each component and field, allowing you to click on the component or field to start editing it in Agility.

It also enables Live Editing, which will show you edits as you type in Agility before you save!

Content Security Policy

X-Frame-Options (Deprecated) and Frame-Ancestors (Recommended)

The X-Frame-Options header has been deprecated in favour of the frame-ancestors directive within the Content-Security-Policy (CSP) header. frame-ancestors provides more flexibility, better compatibility across modern browsers, and is generally the preferred way to control which domains can embed your content in an iframe.

Implementing Frame-Ancestors in Content Security Policy

To allow your site to be embedded in the Web Studio preview frame you'll want to swap out your X-Frame-Options header in favour of frame-ancestors. See an example of this directive below:

Content-Security-Policy: frame-ancestors 'self' https://app.agilitycms.com;This setup allows embedding by Web Studio as well as by your own domain ('self'). Here’s how to add this configuration across different frameworks.

Next.js
ASP.net
Astro Astro.response.headers.set('Content-Security-Policy', ' frame-ancestors 'self' https://app.agilitycms.com;