Twik GenAI Visual Workspace

Onsite Editor

Twik’s visual workspace gives you complete control over your site content, including personalization with custom variants that can be uploaded or generated using our GenAI models. You can access the editor in two ways: through the Twik app or as an on-site editor. Currently, you can edit within the Twik app/dashboard, which requires your site to support iframe rendering (see settings info below). In the coming weeks, we will release an on-site editor that works on any site, regardless of iframe support.

Enabling Iframe Visual Editor

Embedding your website within an iframe can be essential for various purposes, such as visual editors and content previews. This article provides clear, step-by-step instructions to remove iframe security from your website or allow specific subdomains like app.twik.io to render your site within an iframe.

Table of Contents

1. Introduction
2. Understanding Iframe Restrictions
3. Removing Iframe Security from Your Website
4. Allowing Specific Subdomains to Render Your Site
5. Rendering Your Site on Shopify
6. Conclusion

1. Introduction

If your website needs to be embedded within an iframe, you might face restrictions due to security headers. This guide will help you understand these restrictions and how to modify them to allow iframing, ensuring compatibility with tools like onsite visual editors.

2. Understanding Iframe Restrictions

Modern browsers and websites often implement security measures to prevent clickjacking attacks by restricting iframe usage. The two primary headers involved are:

• X-Frame-Options
• Content-Security-Policy (CSP)

X-Frame-Options

This header can take three values:

• DENY: Prevents the page from being displayed in an iframe.
• SAMEORIGIN: Allows the page to be displayed in an iframe if the iframe is on the same origin as the page.
• ALLOW-FROM uri: Allows the page to be displayed in an iframe on the specified origin.

Content-Security-Policy (CSP)

The frame-ancestors directive controls which sources can embed the page in a frame.

3. Removing Iframe Security from Your Website

To completely remove iframe security and allow your site to be embedded anywhere, you need to adjust the headers on your web server.

Apache

If you use an Apache server, add the following lines to your .htaccess file:

    Header always unset X-Frame-Options
    Header set Content-Security-Policy "frame-ancestors *"
    

Nginx

For Nginx servers, modify your server configuration file:

    add_header X-Frame-Options "";
    add_header Content-Security-Policy "frame-ancestors *";
    

4. Allowing Specific Subdomains to Render Your Site

To keep your site secure but allow specific subdomains (like app.twik.io) to render your site within an iframe, you need to set more precise directives.

Apache

Add the following lines to your .htaccess file:

    Header set X-Frame-Options "ALLOW-FROM https://app.twik.io"
    Header set Content-Security-Policy "frame-ancestors 'self' https://app.twik.io"
    

Nginx

For Nginx servers, modify your server configuration file:

    add_header X-Frame-Options "ALLOW-FROM https://app.twik.io";
    add_header Content-Security-Policy "frame-ancestors 'self' https://app.twik.io";
    

5. Rendering Your Site on Shopify

To render your site within an iframe on Shopify, you need to follow specific guidelines and set up iframe protection appropriately. Shopify requires certain configurations to ensure secure embedding of content.

For detailed instructions, refer to Shopify’s documentation: Set up iframe protection on Shopify.

6. Conclusion

By configuring your server to allow iframing, you enable tools like onsite visual editors to function correctly. Whether you choose to remove iframe restrictions entirely or allow specific subdomains, these settings will ensure seamless integration and enhanced usability of your website. If you require further assistance, please consult your developer or web hosting provider.