Rapport Web Viewer Getting Started Details

Import RWV by adding this code snippet to your code.

MARKUP

<script src="https://cdn.rapport.cloud/rapport-web-viewer/rapport.js"></script>

Then, add the RWV web component where you want it to appear on your site:

MARKUP

<rapport-scene
  id="rapportScene"
  project-id="your project id"
  project-token="your project token"
  ai-user-id="ai user id associated with this project"
  lobby-zone-id="lobby zone id this ai user was added to" 
  style="width: 480px; height: 480px; max-width: 100%; max-height: 100%;"
/>

All the above information is available in your project in Rapport Accounts Introduction

For getting access, creating a user and creating a project follow the steps from this tutorial Create a Rapport Project. This custom element can be styled the same way as any other element in HTML.

Finally, start the conversation with the AI. For this example, we start the conversation by adding this code snippet. Make sure to add this after importing RWV and the <rapport-scene> custom element.

However, this custom element can be styled the same way as any other element in HTML.

MARKUP


<script>
  document.getElementById('rapportScene').sessionRequest();
</script>

For simplicity of this example we start the conversation on page load, but most of the time you will want to tie the conversation start with an event or user interaction. (eg.: button press)

Load your page and you should see your avatar spring to life in a couple of seconds.

Quick Prototyping

You can use an iframe based integration method for quick prototyping or basic integration. We suggest using the web component based integration, however, in order to have faster initial loading speed, smaller download size, and more overall flexibility. Learn more about the iframe based integration in the API documentation and/or in the Configuration Example.

API Documentation

The <rapport-scene> element can be configured via attributes or a configuration object passed as a parameter to the session request function. Please note html attributes are kebab-case and parameters are camelCase.

MARKUP

<rapport-scene
  project-id="your project id"
  project-token="your project token"
  ...
/>

JS

const myRapportScene = document.getElementById('rapportScene');
myRapportScene.sessionRequest({
  projectId: 'my project id',
  projectToken: 'my project token',
  ...
});