Guides
Start typing to search…

Add instant viewer to your website

This step-by-step guide explains how to embed Instant Viewer on your website.

What is Instant Viewer?

Instant viewer is a version of Website Copilot, with the added functionality to serve as a PDF reader. Instant Viewer enhances the user experience by:

  • Displaying the PDF file referenced by the agent directly in your site
  • Highlighting the text segments used in the answer
  • Supporting both Pre-Prompt and CRM Integration features

📘

Note:

This is our Enterprise feature. If you are interested in enabling it, please contact our sales team.

Add the main code snippet

You should start by adding the following code at the end of your site’s <body> section:

<script src="https://cdn.customgpt.ai/js/instant-viewer.js" defer="" p_id="PROJECT_ID" p_key="PROJECT_KEY"></script>

You should replace PROJECT_ID and PROJECT_KEY with appropriate values for your project.

Both Pre-Prompt functionality and CRM Integration are available in Viewer. To enable them, follow their respective setup guides and ensure they are activated in the project settings on the Viewer page

With the code snippet in place, you have two options to add a button.

Option 1: Use the default CustomGPT.ai button

Simply copy the following code and paste it at the location on your website where you want the button to appear.

<button data-cgpt-instant-viewer data-cgpt-default-button='true' hidden>
	Ask AI
</button>

If you use this option, you can set the button color in the project’s settings on the Viewer’s page.

Option 2: Use any HTML element

Alternatively, you can simply add this attribute to the element you want to serve as the trigger.

data-cgpt-instant-viewer

The element's click event will be overridden by the Viewer, and it will open when a user clicks on it. It can be any HTML element, such as a button, link, or image.

Updated 4 days ago