How to Add Instant Viewer to Your Website

Instant Viewer is a version of Website Copilot, with the added functionality to serve as a PDF reader. If the agent uses a PDF to generate its response, Instant Viewer can automatically open it and highlight segments that were used for the response - providing more confidence than ever for your users.

📘

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 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.