Quick Start Guide
Integrating Avatars in Websites & Apps
Introduction
This guide will walk you through the simple steps needed to integrate Sentifyd 3D AI avatar into your website or web 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 install an avatar, you need to create and train it on the Sentifyd platform. Once done, open the Website Integration modal from the avatar page.
Step 1: Set Allowed Domain
This is a required step to allow the avatar to be deployed on your website. Add your website domain and click on Save Domain.
Step 2: Add the JavaScript Library
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 3: Configure your Avatar Embed
Use the provided embed creator to configure and style your avatar embed.
Security Note:
Exposing your avatar API key in the frontend is generally safe. This key is public and only permits interaction with the avatar, and its usage is restricted by the “allowed domains” setting—meaning the avatar cannot be deployed on unauthorized websites.
If you prefer not to expose your avatar API key at all, you can follow our Backend-for-Frontend (BFF) guide to issue short-lived access tokens instead.
Step 4: Copy the Avatar Embed Code
Next, copy and add the avatar embed code in your HTML where you want the avatar to appear, but not directly in the body element. Preferably, put it inside a parent element with specific size. If you chose the toggler option, the parent size does not matter and avatar will be deployed in the page's bottom right corner.
Optional: Advanced customization of the Avatar
You can customize your avatar's behavior and appearance using additional attributes in the <sentifyd-bot> component. For a full list of customization options, please refer to the detailed guide on the <sentifyd-bot> Web Component.
Step 5: Test the Avatar
Finally, load your webpage to see the avatar in action and test it.
Last updated