Sentifyd Documentation
  • Welcome
  • FEATURES
    • Sentifyd.io Avatars Overview
    • Creating Avatars
    • Training Avatars
  • INTEGRATIONS
    • Quick Start Guide
    • Avatar Web Component <sentifyd-bot>
    • Secure Avatar Access
Powered by GitBook
On this page
  • Introduction
  • Preparation: Create an Avatar
  • Step 1: Add the JavaScript Library
  • Step 2: Add the Avatar Web Component
  • Step 3: Customize the Avatar (Optional)
  • Step 4: Test the Avatar
  1. INTEGRATIONS

Quick Start Guide

Integrating Avatars in Websites & Apps

Introduction

This guide will walk you through the simple steps needed to integrate an interactive 3D avatar into your website or application. To begin, ensure you have the avatar's API key, which can be found in the Sentifyd platform under the avatar section.

Preparation: Create an Avatar

Before you can integrate an avatar, you need to create and train it on the Sentifyd platform. Once your avatar is ready, obtain its API key from the actions menu on the avatar's page. This key is essential for the integration process.

Step 1: Add the JavaScript Library

First, include the Sentifyd JavaScript library in the <head> section of your HTML document. This library is necessary for loading and managing the avatar on your website.

<script type="module" src="https://frontend.sentifyd.io/sentifyd-bot/main.js"></script>

Step 2: Add the Avatar Web Component

Next, add the <sentifyd-bot> web component in your HTML where you want the avatar to appear. Make sure to include the mandatory api_key attribute with your avatar's API key:

<sentifyd-bot api_key="your-avatar-api-key"></sentifyd-bot>

Security Note:

To prevent exposing your API key in your frontend, see our guide on how to implement BFF (Backend for Frontend) to get access tokens.

Step 3: Customize the Avatar (Optional)

You can customize your avatar's behavior and appearance using additional attributes in the <sentifyd-bot> component. Below is an example of how to modify various settings:

<sentifyd-bot
  api_key="your-avatar-api-key"
  toggler=false
  terms_href="link-to-your-terms"
  privacy_href="link-to-your-privacy"
  enable_captions=false
>
</sentifyd-bot>

For a full list of customization options, please refer to the detailed guide on the <sentifyd-bot> Web Component.

Step 4: Test the Avatar

Finally, load your webpage to see the avatar in action. Make sure to open your browser's console to check for any errors, which could indicate issues with the integration.

PreviousTraining AvatarsNextAvatar Web Component <sentifyd-bot>

Last updated 7 days ago