Getting Started With Web Studio

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

If your website's Content Security Policy (CSP) header is not configured correctly to allow Web Studio to show it in an iframe, your users will receive an error when attempting to load it.

You will need to ensure the Content-Security-Policy HTTP header has a frame-src value of https://app.agilitycms.com like this: Content-Security-Policy: frame-src https://app.agilitycms.com/

A detailed guide on Content-Security-Policy and frame-src, as well as how to properly configure it can be found here.

Each framework has different ways of settings Http Headers. Below are some examples:

• Next.js: Setting Custom Headers
• ASP.net: Setting Custom Headers
• Astro: Astro.response.headers.set('Content-Security-Policy', 'frame-src https://app.agilitycms.com/');