Page Comparison

Using the embed code option you can host the Digital Person on your website and have a conversation with your Digital Person. This does not require any custom development and is the fastest way to integrate.

The code snippet must be added into your website’s HTML code. The Digital Person displayed on the web page comes with a default styling in a square frame at the bottom right corner of the page with a configurable greeting text.

The user can control the camera and microphone permissions whenever they want during the session using the icons within the widget. The camera and microphone options are both turned off when the widget loads, allowing you to select either or both. The browser would require you to grant microphone and/or camera permissions for an enhanced interactive experience with the Digital Person. Upon session time out, the widget returns to the initial state, where the profile picture and greeting message are displayed.

Communicating to a Digital Person requires you to grant microphone (audio only connection) and/or camera (video connection) permissions the first time you interact with the Digital Person on the webpage 

Below are some guidelines for using it on some common websites:

Copying code for your project

The code used to embed into the website is the same for every project, except for the API Key which you must provide separately.

To copy the code:

1. Go to the Digital DNA Studio dashboard and open the project.

2. Expand the Embed Code option on the Project Management page.

3. Copy the code or save it as a text file.

4. Replace the YOUR_API_KEY value with the web API key you generate for your project. See Connecting Using API Keys for details.

Additional Configuration

The code snippet SM_CONFIG can be edited to include the below additional parameters to customize the experience:

    var SM_CONFIG = {
      apiKey: 'YOUR_API_KEY',
      profilePicture: "https://assets.cdn.soulmachines.cloud/AvatarCoverImages/image-png_yumi_jp-l.jpg",
	  greeting: 'Hi! Can I help you with something?'
    };

Limitations

Changing the Profile Picture

When the session starts,

the image of the digital person is not displayed by default; you can work around this problem by using the profilePicture parameter

and

displaying a static image or using a gif of the digital person.

1. Download the image of the Digital Person you are using in the project by right-clicking the image under the “WHAT LOOK IS RIGHT FOR YOU?” section in Digital DNA Studio, and then click Save as Picture. (Or create a gif of the Digital Person)

2. Place the image/gif in a publicly accessible location, so that you can obtain its URL.

3. Use the URL in the profilePicture parameter in the code snippet.

Content Cards Support

Web Widget supports Options Card as a valid content card. When configured, a clickable options list appears on top of the Digital Person Widget as a floating card as shown below. 

Image Added

Limitations

• The Digital person image does not display before the session starts

• There are no styling options at this stageThere is no content card support at this stage

• Greeting html element is not responsive when loaded on a mobile view

Supported browsers

• PC- Chrome, Edge chromium, and firefox

• Mac- Chrome, Safari, and firefox

• Android - Chrome and firefox

• iOS - Chrome, Safari, and firefox

Consideration when embedding into social media apps

• Embedding into the following social media applications is supported on iOS: Messenger, Facebook, Instagram, and LinkedIn

• None of the social media applications are supported on Android

FAQs

Can I customize my web component widget?

The only customizations currently supported are changing the profile picture and greeting message of the digital person widget.

Is the widget always going to be on the bottom right corner of the website?

Yes, currently the position of the widget is pre-determined. This is in our backlog to change in the future.

Does the widget work on mobile browsers?

Yes, the widget is designed to have a responsive view for both mobile and desktop browsers. However. the greeting message is not yet responsive for mobile devices. Currently, the mobile browser views are:

Image Removed

Image Removed

Image Added

Image Added

What human OS platform Digital People are supported by the widget?

The widget supports Digital People on any HumanOS platform, however, the camera and mic decoupling functionality is only supported by Digital People that are Human OS2.0+

How can I get a different view of the Digital Person other than the head and shoulders view?

The widget by default comes with a head and shoulders view (default camera cuts) to the Digital Person. It also supports the Cinematic Camera Cuts which are automatically toggled based on the conversation. The Responsive Camera Cuts are currently only appearing as default camera because of the lack of content cards. Once we’ve implemented the content cards, you would be able to select and see all three different types of cuts and their corresponding behavior in the widget frame.

Do I need to re-embed my code snippet from Studio, if

I make any changes to my project?

No, any changes to the project within DDNA Studio should automatically reflect on the embedded widget as long as you “save” and “deploy” the project.

Can I change the static DP image at the beginning of the session to a pre-recorded video / gif?

Yes, you can; however we currently recommend using a static DP image from DDNA Studio. The image is optimized for the widget view. You can create a gif of your DP in a widget and upload it in a public location and use that link for the “profilePic” marker.