Enable Online help editing

PiSuite allows users to generate contextual help for their website using AI. Upon logging into PiSuite, the user can select a page from their website. Then the user can either:

  • Select a webpage in PiSuite's UI, and generate help items via AI-powered analysis.
  • Visually select individual HTML elements and define custom help content for each individual element (see PiSuite Demo) .

 

To enable this PiSuite functionality, your website must:

  • Be embedded in an <iframe> within the PiSuite Admin site, that is, https://app.pisuite.com

  • Optionally accept API calls from https://app.pisuite.com

Modern browsers restrict cross-domain embedding and API calls due to same-origin policies.

 

To allow this, you can choose between:

  • Browser-Side Configuration, or
  • Server-Side Configuration

 

Note that these changes are not required for the integration of PiSuite in your website, e.g., display of the help item, alerts, news item, etc..

 

Option 1: Browser-Side Configuration

This approach disables browser security features and is not recommended for production use.

  • Step 1: Create a New Chrome Profile

Create a dedicated Chrome profile, e.g., PiSuiteHelp, to isolate settings.

  • Step 2: Launch Chrome with CORS Disabled

Windows:
chrome.exe --profile-directory="PiSuiteHelp" --disable-web-security

macOS:

open -na "Google Chrome" --args --disable-web-security --user-data-dir="/tmp/chrome-dev"

Important: Browsers running with --disable-web-security are not safe for normal browsing.

  • Step 3: Install PiSuite Browser Extension

  1. Download and unzip the PiSuiteHelpGenerator-extension.
  2. Open Chrome and go to chrome://extensions/.
  3. Enable Developer Mode (toggle in the top right).
  4. Click Load unpacked.
  5. Select the unzipped PiSuiteHelpGenerator-extension folder.

 

Option 2: Server-Side Configuration (Non-Production Server Only)

This method modifies the web server to explicitly allow embedding and cross-origin API calls from https://app.pisuite.com.

Web Server Requirements

You need to configure both:

  • Cross-Origin Resource Sharing (CORS) headers
  • IFrame Embedding permissions (X-Frame-Options and Content-Security-Policy)

 

ASP.NET  MVC (.NET Core)

If your website is using ASP.NET MVC (.NET Core), then you need to make the following modifications:

1. Modify web.config

Add or update headers to allow iframe embedding from app.pisuite.com:

<configuration>

    <system.webServer>

        <httpProtocol>

            <customHeaders>

                <remove name="X-Frame-Options" />

                <add name="Content-Security-Policy" value="frame-ancestors 'self' https://app.pisuite.com;" />

            </customHeaders>

        </httpProtocol>

    </system.webServer>

</configuration>

2. Update Startup.cs for CORS

public void ConfigureServices(IServiceCollection services)

{

    services.AddCors(options =>

    {

        options.AddPolicy("AllowAnyOrigin", builder =>

                builder

                    .SetIsOriginAllowed(_ => true)

                    .AllowAnyHeader()

                    .AllowAnyMethod()     

                    .AllowCredentials()

        );

    });

}

 

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

{

    app.UseCors("AllowAnyOrigin");

}

.NET Core Web API (SPA Backend)

If you're serving a static SPA (e.g., React) and exposing a Web API, then update Program.cs:

app.UseCors(builder =>

{

    builder

        .SetIsOriginAllowed(_ => true)

        .AllowAnyMethod()

        .AllowAnyHeader()

        .AllowCredentials();

});

 

Use SetIsOriginAllowed(_ => true) as a workaround when credentials are required.

 

Use your non-production environment

If you have security concerns about the following settings, then we recommend that you make them in your development or other non-production environment. Then you can use your non-production environment to visually select page elements from your site and define their help content, which then becomes visible in all your environments, including the production environment.

If your site uses Cookies, e.g., for user authentication, then your Cookies will have to have the attributes

SameSite=None and Secure

as in

Set-Cookie: MyCookie=123Jump; SameSite=None; Secure

as in

Set-Cookie: MyCookie=123Jump; SameSite=None; Secure