Skip to main content

Custom UI Templates

The UI Template is intended to provide a starting point for custom UI development on your project. The template is neutral in design and includes a variety of user controls and content card templates that you can use in your experience. The template makes use of the latest SM webSDK features at the time, so you can be confident that you are starting your UI development from a solid foundation. We will provide periodic updates to this template. If you have any feedback or feature requests for future versions, please submit that via our Customer Support portal under the CX UI Template category.

info

Interact with Cory to see what you can build.

Accessing the Templates​

Stay Up to Date​

You can stay up-to-date on the UI template by clicking the "Watch" button in the top right corner of the GitHub repository page and choosing the notifications you wish to receive.

Deploying the Template​

  1. Create a conversation using an NLP agent, or opt to use a skill-based conversation from DDNA Studio.
  2. Create a DDNA Studio project with relevant NLP agent, skills and Digital Person selection.
  3. Create a web API key for UI connection.
  4. Build and deploy UI code as a static website to your cloud provider (e.g. AWS Amplify).
  5. Copy your environment variables from the .env.example template into .env, including your API key

File Structure Overview​

The template is built off of React and Redux. It’s designed to be as easy to take apart as possible–every component is built to be as independent as possible.

  1. Interaction with the Digital Person is handled through the SM Redux store–most smwebsdk methods are mirrored in the reducer.
  2. Mostly, the files that need to be changed are in the routes and components folder.
  3. Content cards are integrated with the app through the ContentCardSwitch.js file.
  4. The routes integrate the components into distinct pages that are displayed by react router.

Key Areas to Update​

When using the Custom UI Template, there are a few things you’ll absolutely need to update prior to deploying your customized experience.

  1. Insert the webAPI key for your Digital Person (.env file, REACT_APP_SM_API_KEY setting)
  2. Add your Google Analytics tracking ID, if used. (Shown in the .env.example file line 24.)
  3. Update the logo and brand styling elements (colors, fonts, etc.).
  4. Update the onboarding screen text with your DP’s name and information on what the user can talk about.

Good to Know​

When using the Custom UI Template, there are a few things you’ll need to decide early on, as they will affect how you structure your conversation in the NLP.

  • If you intend to use the “skip” feature, you’ll want to make sure that your content cards are always called at the very beginning of a DP turn. Otherwise, those cards will not be raised if a user skips before the DP has reached the trigger for those cards.
  • Remember, a DP turn is the length of time a DP speaks without needing input from a user. Branching based on variables does not start a new turn - it continues as part of the original turn.

How to​

Place DP on the left side of the screen​

You can use the following code to create an invisible container that takes up 70% of the screen's real estate and keeps the DP on the left-hand side of the screen permanently. Place this code in DPChat.js component (line 106 in the template repo).

<div className="col-7" data-sm-content><ContentCardDisplay /></div>

Additional Resources​