Skip to main content
Unlisted page
This page is unlisted. Search engines will not index it, and only users having a direct link can access it.

UseCaseView component

A way to demonstrate multiple use cases in multiple languages at once.

The <UseCaseView/> component is an opinionated way of displaying multiple use-case code for a product (voice, SWML) etc.

On a large display, it shows multiple buttons to allow users to select use cases and specific products which support that use case.

On a small (mobile) display, it is a simple carousel with Next and Prev buttons, and a full-width code example.

Try it out​

SWML

version: 1.0.0
  sections:
  main:
    - ai:
      post_prompt_url: "https://example.com/my-api"
            prompt:
            text: |
                You are Franklin's assistant, and your job is to collect messages for him over the phone.
                You can reassure that Franklin will get in touch as soon as possible.
            params:
            background_file: "https://path/to/file.mp3"
            background_file_volume: -20
            save_conversation: true
            conversation_id: "80afbb06-f0f1-11ed-a285-62c3bdb19a89"
📚 SWML documentationView the full guide →

Demo (mobile)​

Compatibility API

version: 1.0.0
  sections:
  main:
    - ai:
      post_prompt_url: "https://example.com/my-api"
            prompt:
            text: |
                You are Franklin's assistant, and your job is to collect messages for him over the phone.
                You can reassure that Franklin will get in touch as soon as possible.
            params:
            background_file: "https://path/to/file.mp3"
            background_file_volume: -20
            save_conversation: true
            conversation_id: "80afbb06-f0f1-11ed-a285-62c3bdb19a89"
📚 SWML documentationView the full guide →

Reference code:​

Please use multiple files.

Trying to fit all use cases and all paradigms into a single file will get very hard to maintain (and probably hard to look at). So use one file per code example, in it's own separate folder.

All partial files should start with an underscore (_) to avoid being mistaken for doc pages

Docusaurus ignores .mdx files starting with an underscore when generating sidebar and enumerating files, so _usecases.mdx won't be directly listed, but can still be included.

import Compat1 from "./_compat1.mdx"
import Compat2 from "./_compat2.mdx"
import SWMLExt from "./_swml_ext.mdx"

import { UseCaseView } from "@site/src/components/HomepageFeatures/UseCaseView"

<UseCaseView data={{
  "AI Phone Call": {
    "Compatibility API": <Compat1/>,
    SWML: <Compat2/>,
    "Call Flow Builder": <SWMLExt/>,
  },
  "Enterprise CRM": {
    "Compatibility API": <Compat2/>,
    SWML: <div style={{height:300, background:"aquamarine"}}></div>,
    "Call Flow Builder": <div>Call Flow Builder 2</div>,
  },
}}/>

Additional params​


// To force desktop mode, you can use:

<UseCaseView data={data} desktopMode/>

// To force mobile mode, you can use:

<UseCaseView data={data} mobileMode/>

// By default, both desktopMode and mobileMode are enabled, so it's responsive to changes

<UseCaseView data={data} desktopMode mobileMode/> // is the same as
<UseCaseView data={data} /> 

<UseCaseView data={data} /> 

// Don't force desktop or mobile mode unless you have strong reason to.

SWML

version: 1.0.0
  sections:
  main:
    - ai:
      post_prompt_url: "https://example.com/my-api"
            prompt:
            text: |
                You are Franklin's assistant, and your job is to collect messages for him over the phone.
                You can reassure that Franklin will get in touch as soon as possible.
            params:
            background_file: "https://path/to/file.mp3"
            background_file_volume: -20
            save_conversation: true
            conversation_id: "80afbb06-f0f1-11ed-a285-62c3bdb19a89"
📚 SWML documentationView the full guide →