Supporting custom code in preview mode

Users can preview sites with custom code before publishing. When users add your app’s scripts or resources as custom code, these resources need to be accessible from Webflow’s preview domain.

How preview mode works

When a user enables preview or comment mode, their site renders on a new subdomain:

{shortName}.canvas.webflow.com

This creates a secure, isolated environment that closely mirrors the published site experience, where custom code scripts can execute safely.

Important considerations for custom code

If your custom code scripts implement specific security controls, they may need modification to work in preview and comment modes.

What needs to be updated?

Your custom code scripts may need updates if they implement any of the following security controls:

• Content-Security-Policy (CSP) restrictions
• Domain-based script or stylesheet restrictions
• Origin or Referrer header validation

Required modifications

For scripts with domain restrictions

If your scripts check for specific domains or origins, update domain validation to include preview domains:

1
// Update domain validation to include preview domains
2
const isAllowedDomain = (domain) => {
3
    return domain.endsWith('.webflow.io') || 
4
           domain.endsWith('.canvas.webflow.com');
5
}

For scripts that validate origins

If your scripts validate request origins, update origin validation to include preview domains:

1
// Example of updated origin validation
2
const validateOrigin = (origin) => {
3
    return origin.includes('.webflow.io') || 
4
           origin.includes('.canvas.webflow.com');
5
}

For dynamic domain detection

If your scripts need to detect the current environment, update domain detection to include preview domains:

1
const shortName = window.location.hostname.split('.')[0];
2
const isPreviewMode = window.location.hostname.includes('canvas.webflow.com');

Testing your custom code

To ensure your custom code works correctly:

1. Add your custom code to a site or page
2. Enter preview mode to test functionality
3. Verify that all interactive elements work as expected
4. Check that any external service connections still function properly

Support resources

For implementation assistance or questions, please contact us at developers@webflow.com.