Examples

Preconception

All the following code examples assume that you already have a <rapport-scene> element initialized in your page and you have a variable referencing this element named rapportScene.

Greeter avatar

It's possible to configure a non-interactive avatar that starts a welcome speech after the session is connected.

JS

rapportScene.sessionRequest({
  micRequired: false,
  openingText: 'Welcome everybody!',
});

You can also use the TTS CPIM to make your avatar speak the given text.

JS

rapportScene.sessionRequest({
  micRequired: false,
  sessionConnected: () => {
    rapportScene.modules.tts.sendText('Welcome everybody!');
  },
});

Error handling

There are two places where errors could happen, during sessionRequest, and during the ongoing session.

JS

try {
  await rapportScene.sessionRequest({
    sessionDisconnected: (reason) => {
      // show error or timeout layout depending on the reason of disconnect
      if (['RAPPORT_INACTIVITY_TIMEOUT', 'RAPPORT_TIMEOUT'].includes(reason.code)) {
        // show timeout layout
      } else {
        // show error layout
        throw reason;
      }
    },
  });
} catch (error) {
  // show error layout
  throw error;
}

Simple rapport-scene integration into an index.html

JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rapport example</title>

    <!-- Load Rapport Web Viewer. -->
    <script src="https://cdn.rapport.cloud/rapport-web-viewer/rapport.js"></script>
  </head>

  <body>
    <button id="demoButton">
      Start Demo
    </button>
    
    <button id="endButton">
      End Demo
    </button>

    <div>
      <rapport-scene
        id="rapportScene"
        background-color="transparent"
        loading-image=""
        style="width: 600px; height: 600px;"
      />
    </div>
  </body>

  <script>
    const rapportScene = document.getElementById('rapportScene');
    const demoButton = document.getElementById('demoButton');
    const endButton = document.getElementById('endButton');

    demoButton.addEventListener('click', async () => {
      /* User accepted preference cookies. */
      const enableCookies = false;

      try {
        await rapportScene.sessionRequest({
        projectId: '00000000-0000-0000-0000-000000000000',
        projectToken: '00000000-0000-0000-0000-000000000000',
        aiUserId: '00000000-0000-0000-0000-000000000000',
        lobbyZoneId: '0000',
        openingText: 'Start',
        enableCookies,
        sessionConnected: () => {
          /* Connected handler. The avatar is ready for the conversation. */
        },
        sessionDisconnected: () => {
          /* Timeout handler. */
        },
      });
      } catch (error) {
        /* Handle error. */
        console.error(error);
      }
    });

    /* End demo. */
    endButton.addEventListener('click', async () => {
      await rapportScene.sessionDisconnect();
    });
  </script>
</html>

Simple iframe integration into an index.html

JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rapport iframe tester</title>
  </head>

  <body style="background-color: #082349;">
    <div style="height: 600px;">

      <iframe src="https://accounts.rapport.cloud/avatar-iframe?projectId=00000000-0000-0000-0000-000000000000&projectToken=00000000-0000-0000-0000-000000000000&aiUserId=00000000-0000-0000-0000-000000000000&lobbyZoneId=0000&micRequired=false&openingText=start&buttonLabel=Start%20Demo&initialMood=positive" title="Rapport" scrolling="no" style="border: 0; width: 600px; height: 600px;"></iframe>

    </div>
  </body>
</html>