Skip to main content

Quickstart

Getting started with Clive Snapshot is easy. Follow these simple steps to integrate the chat interface into your web application.

Before Getting Started​

Before you can integrate Clive Snapshot into your web application, you need to sign up and obtain your client ID. This ID is used to authenticate your application and access the snapshot services.

Import the Clive Snapshot Script​

  • Insert the following script tag into your index.html file to load the Clive Snapshot chat interface asynchronously:
index.html
<script src="https://snapshot-two-self.vercel.app/static/js/main.js" async defer></script>

This script tag loads the Clive Snapshot web component asynchronously, ensuring that it doesn't block the rendering of your page. Here's a breakdown of its key features:

  • Asynchronous loading: The async attribute allows the script to be downloaded in parallel with parsing the page, improving overall load time.
  • Deferred execution: The defer attribute ensures the script only executes after the HTML document has been fully parsed, preventing potential render-blocking issues.
  • Web component: Clive Snapshot is built as a web component, which means it's a reusable, encapsulated piece of functionality that works across modern browsers.
  • Performance optimization: By loading asynchronously, your page can continue rendering and become interactive faster, especially beneficial for users on slower connections.
  • Ease of integration: This single script tag is all you need to include the entire Clive Snapshot functionality, simplifying the integration process.

Use the Chat Interface​

Once you've included the Clive Snapshot script in your HTML, you can easily integrate the chat interface into your application. Here's how to use it:

  • The Clive Snapshot chat interface is implemented as a custom web component, making it simple to add to your application.
  • To include the chat interface, use the <snapshot-interface /> custom element anywhere in your application's HTML.
  • This element renders a trigger button that, when clicked, opens the full chat interface.

Here's an example of how to use the custom element:

<snapshot-interface />