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.
Key features:
Click-to-start functionality
Supports session persistence
Supports Content cards
Configurable greeting text and profile picture
Advanced Customizations to change the colors, styles and fonts
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:
childrenObtaining 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:
Go to the Digital DNA Studio dashboard and open the project.
Expand the Embed Code option on the Project Management page.
Copy the code or save it as a text file.
Authenticating the Widget
Replace the YOUR_API_KEY value with the web API key you generate for your project. See Connecting Using API Keys for details.
Customizing the Widget
The code snippet SM_CONFIG can be edited to include the below additional parameters to customize the experience:. For customizing colors, styles, and fonts, see Advanced Customizations.
| Code Block | ||
|---|---|---|
| ||
<script
src="https://static.soulmachines.com/dev/widget-snippet.min.js"
data-sm-api-key="'YOUR_API_KEY'"
data-sm-greeting="Welcome"
data-sm-profile-picture="https://assets.cdn.soulmachines.cloud/AvatarCoverImages/image-sam-l.jpg"
></script> |
Parameter | Required/Optional | Description |
|---|---|---|
| required | This is the Web API Keys you generated for your project. |
| alternative | This is the JTW Token generated for the project. If you wish to use the JWT token instead of apiKey, you must delete the |
| optional | URL of an image of the Digital Person in a publicly accessible location. Supports an image in jpg, gif, and png format. |
| optional | This can be used to configure the greeting text displayed on the screen to encourage the users to interact with the Digital Person. The greeting cannot be turned off. If it is not configured then a default greeting is displayed: |
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 data-sm-profile-picture parameter and displaying a static image or using a gif of the digital person.
Default Profile Image
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)
Place the image/gif in a publicly accessible location, so that you can obtain its URL.
Enter the URL in the
data-sm-profile-pictureparameter in the code snippet.
Embed it in your website
In general, the edited embed code needs to be added to the <head> tag in the html of the website. The embed code must be present on every page that you would want to embed the Digital Person on.
| Code Block | ||
|---|---|---|
| ||
<!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>SM Widget Example</title> <script src="https://static.soulmachines.com/widget-snippet.min.js" data-sm-greeting="Welcome" data-sm-api-key="YOUR_API_KEY"></script> </head> <body></body> </html> |
Below are instructions for embedding the widget into popular website builders and hosting platforms:
Some of these website providers allow for a "global embed" functionality and this feature can be used to have the widget appear on every single page on the website.
Content Cards Support
The widget currently offers the following content card options for displaying rich content. See the section Displaying Content Cards to understand how to configure these content cards in your corpus. When configured, the cards appear on top of the Digital Person Widget as a floating card as shown below:
Content awareness in the Web Widget
When content is populated in the browser outside of the widget, the Digital Person’s glance is not directed at the content correctly. This will be resolved in an upcoming release. As a temporary fix, paste this into each conversation node where @showcards is being used:
| Code Block |
|---|
\@showCards(options) \@attendObject() |
Options Card
Displays a clickable list of options:
Links Card
Displays a clickable link to an external website or internal webpage. The link card can optionally display an image and description. If not present in the data it will be hidden. The external link navigates the user to the external website in a new tab in the browser.
Image Card
Displays a remotely hosted image above the widget. We recommend using an image that is 350px by 350px.
Markdown Card
Displays styled markdown compatible content.
Limitations
The Digital person image does not display before the session starts, a workaround for this is to use the
data-sm-profile-pictureparameter in the code snippet and display a static image or gif of the digital personThere are no styling options at this stageGreeting 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:
 |  |
What human OS platform Digital People are supported by the widget?
The widget supports Digital People on any HumanOS platform, minus two features:
camera and mic decoupling functionality is only supported by Digital People that are Human OS2.0+
session persistence functionality is only supported by Digital People that are Human OS2.4+
Who has access to the Web Widget technology?
The Web Widget and corresponding embed code is available for all DDNA Studio users in their project summary or “deployment” screen of individual project.
How can I get a different view of the Digital Person other than 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.
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.
⚠ ⚠ If you copy pasted the embed code before July 11 release of the Web Widget (v1.5), you have to re-copy and paste the embed code to avail functionality on or after this release ⚠ ⚠
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.
Do I need to understand the CMS or web platform requirements of my customer to see if they are eligible for the web widget?
The Web Widget is a Soul Machines javascript tool that encapsulates our SMWebSDK in a web component wrapper. This technology works for any website that allows for code injections, iframes or HTML code snippets to be added to them. In the modern day, this would encompass majority of the websites developed today
What is Session Persistence and how can I get this functionality?
Session Persistence is the Web Widget’s ability to continue the session on a different page in the same domain where the widget is embedded. This functionality currently only works for pages loaded within the same tab of the browser.
In order to get the session persistence functionality, you would have to update the API keys generated for the project to include session persistence toggle
How to use the power of Session Persistence to make navigation possible within the conversation?
There are several ways to implement navigation if you have a persisted widget across multiple pages.
Navigation using Content Cards : As a conversation writer, you can use the Internal Links Card(s) to present links to the desired pages within your domain to the user. The user can then click on the card to navigate to the desired page. The page would reload to the new page and the DP would resume session from there.
| Code Block |
|---|
{
"output": {
"generic": [
{
"values": [
{
"text": "Cool! let me show you how i can persist on different page loads with you. \\@showcards(internallink) \nLet's go to the Use Cases page together! \n#PauseTwo\n#PauseTwo\n"
}
],
"response_type": "text",
"selection_policy": "sequential"
}
]
},
"context": {
"public-internallink": {
"id": "internalLink",
"data": {
"url": "https://smitstage.wpengine.com/use-cases-copy/",
"title": "Soul Machines Use Cases",
"imageUrl": "https://smitstage.wpengine.com/wp-content/uploads/baseEightDP-2048x2048.png",
"description": "End-to-end creativity and collaboration platform to enhance your digital worlds with AI avatars."
},
"type": "internalLink"
}
}
} |
Example Code for navigation using Internallink Card
Navigation using independent click on somewhere on the webpage : A user can peruse the webpage and clicking on a link within the page to navigate to a different page, in this event to ensure session persistence, the widget embed code must be present on the possible navigatable pages.
Do I need to embed the widget on every page I want it to persist?
Yes, the embed code must be present on every page that you would want to embed the Digital Person on. Some websites allow for a “global embed” functionality and this feature can be used to have the widget appear on every single page on the website.
Contents
| Table of Contents |
|---|