Snapshot Interface Props

Accepted Props

The Snapshot interface component accepts the following props:

Prop	Type	Default	Required	Allowed	Example	Description
client_id	string	" "	Yes	Any valid string	"abc123"	This is used to identify your account.
quick_prompts	json	'[]'	No	Valid JSON array	'["Prompt 1", "Prompt 2", "Prompt 3"]'	An array of quick prompts to display in the interface.
first_name	string	" "	No	Any valid string	"Athena"	The first name of the user.
meta_data	json	'{}'	Yes	Valid JSON object	{"user_type": "premium"}	Additional metadata to pass to the interface.
session_id	string	" "	Yes	Any valid string (could be a UUID or your user id)	"qnhhef85......"	This will be used to keep track of conversational flow .
button_size	string	md	No	'sm', 'md', 'lg'	"lg"	The size of the trigger button.

1. client_id:

   • This is a crucial prop used to identify your account.
   • It must your valid client id which can be found in your portal.
   • Example: "abc123"

2. quick_prompts:

   • This prop allows you to provide an array of quick prompts to be displayed in the interface.
   • It's optional and defaults to an empty array if not provided.
   • The value should be a valid JSON array of strings.
   • Example: '["What's new?", "How can I help?", "Tell me more"]'

3. first_name:

   • This prop is used to personalize the interface with the user's first name.
   • It's optional and defaults to an empty string if not provided.
   • Any valid string can be used.
   • Example: "John"

4. meta_data:

   • This prop is used to pass additional metadata to the interface.
   • It's required and should be a valid JSON object.
   • Use this to provide any extra information that might be relevant to the interface or backend processing.
   • Example: '{"user_type": "premium", "language": "en"}'

5. session_id:

   • This prop is crucial for maintaining the conversational flow.
   • It's required and should be a unique identifier for each session.
   • You can use a UUID or your user's Id.
   • Example: "550e8400-e29b-41d4-a716-446655440000"

6. button_size:

   • This prop determines the size of the trigger button in the interface.
   • It's optional and defaults to "md" (medium) if not specified.
   • Allowed values are "sm" (small), "md" (medium), and "lg" (large).
   • Example: "lg"

// Generate a random 32 character alphanumeric value
const randomString = generateAlphanumericValue(32);

// Stringify your meta_data object
const metaData = () => {
  const myObject = { user_type: "premium", language: "en" };
  return JSON.stringify(myObject);
};

<snapshot-interface
  client_id="abc123"
  first_name={user?.firstName}
  meta_data={metaData()}
  quick_prompts='["Prompt 1", "Prompt 2", "Prompt 3"]' // must be a valid JSON array
  button_size="sm"
  session_id={randomString}
/>

const generateAlphanumericValue = (length) => {
  return [...Array(length)].map(() => Math.random().toString(36).charAt(2)).join("");
};

Remember to provide values for all required props (client_id, meta_data, and session_id) when using the Snapshot interface component in your application.