Avatar Web Component <sentifyd-bot>

Guidance on how to use the attributes of the <sentifyd-bot> web component.

Introduction

The <sentifyd-bot> web component allows you to easily add a Sentifyd.io 3D conversational avatar to your web page. This component is designed for simplicity, enabling quick integration with a variety of customization options through its attributes. For a quick start guide, refer to our Integration Quick Start Guide.

What is a Web Component?

A web component is a custom HTML element that behaves similarly to standard HTML elements. It can have attributes, methods, and events, allowing developers to use it without needing to know the underlying complexities. The <sentifyd-bot> component is built using these principles, making it as intuitive to use as any native HTML element. To learn more about web components, visit webcomponents.org.

Avatar Deployment Settings

The following attributes control how the avatar is deployed on your web page:

• toggler: true or false, defaults to true. This attribute enables the chatbot toggler mode, positioning the avatar at the bottom right of the page. When true, the avatar can be minimized or expanded by the user.

• compact: true or false, defaults to false. When true, the avatar is displayed without the header or footer, making it more compact and less intrusive.

Example:

<sentifyd-bot toggler="true" compact="false"></sentifyd-bot>

compact: true	compact: false

Deployed avatar with chatbot toggler set to true.

Avatar Access

To connect the web component to a specific avatar you’ve created and trained on Sentifyd, use these attributes:

• api_key: This is the unique key that allows access to your avatar. Obtain the API key from the avatar's page under "Actions" > "Access API key & Domain".

• avatar_id: The unique identifier of the avatar you wish to display. This ID is available under "Actions" > "Details" on the avatar's page.

• token_endpoint: A backend endpoint URL that the component uses to obtain temporary access tokens. This enhances security by reducing direct exposure of your API key.

Example:

<sentifyd-bot api_key="your-avatar-api-key" avatar_id="your-avatar-id" token_endpoint="https://your-backend.com/token"></sentifyd-bot>

Brand Customization

Customize the avatar to match your brand identity using the following settings:

• terms_href: The URL to your terms of service. If not specified, it defaults to Sentifyd's terms at sentifyd.io/terms.

• privacy_href: The URL to your privacy policy. If not specified, it defaults to Sentifyd's privacy policy at sentifyd.io/privacy.

• brand_name: The name of your brand or institution, displayed in the avatar's interface.

• brand_logo: The URL of the logo image displayed in the avatar's header.

To further customize the appearance, use CSS variables:

<style>
  sentifyd-bot {
    --primary-color: rgb(67, 156, 144);
    --secondary-color: rgb(33, 24, 200);
  }
</style>

Example:

<sentifyd-bot
  api_key="your-avatar-api-key"
  brand_name="Your Brand"
  brand_logo="https://your-site.com/logo.png"
  terms_href="https://your-site.com/terms"
  privacy_href="https://your-site.com/privacy"
></sentifyd-bot>

Avatar Features

Enable or disable specific features of the avatar to suit your needs:

• username: A string that identifies the user, allowing for personalized interactions.

• email: The user’s email address, which can be used for contact purposes.

• isTermsAccepted: true or false, indicating whether the user has accepted the terms of service. This can be used to conditionally enable certain features.

• enable_captions: true or false, defaults to false. When true, captions for the avatar’s speech are enabled. Note that captions for user speech recognition are always enabled.

Example:

<sentifyd-bot
  api_key="your-avatar-api-key"
  username="JohnDoe"
  email="[email protected]"
  isTermsAccepted="true"
  enable_captions="true"
></sentifyd-bot>