diff --git a/docs/STARTER_PROMPTS.md b/docs/STARTER_PROMPTS.md new file mode 100644 index 0000000000..c8ce5fdee0 --- /dev/null +++ b/docs/STARTER_PROMPTS.md @@ -0,0 +1,61 @@ +# Starter Prompts + +Starter prompts are a special message that would send during greeting. It can consist of: + +- An optional image +- An optional name of the bot (plain text) +- An optional description about the bot (Markdown) +- 1 to 6 buttons with predefined message to assist customers to jumpstart the conversation + - A title for each button (plain text, required) + - The message to send or put in the send box when clicked (plain text, required) + - Notes: if the Starter prompts has no prompt buttons, service should not send Starter Prompts activity. Web Chat should ignore Starter Prompts activity without any buttons + +## UX design choices + +- Buttons will show as a 3x2 grid when width of Web Chat is >= 500px. If it is <= 499px, buttons will show as a 1x3 grid with "show more" +- If there is a "Starter Prompts" activity being sent in the conversation, the "View prompts" button will always show on lower right, just above the send box + - If suggested actions are shown, it will be show on top of the "View prompts" button +- Clicking on the "View prompts" button will pop up a modal dialog to select multiple buttons + +## Payload + +```json +{ + "type": "event", + "name": "StarterPrompts", // Should we name this "greeting" event? And should it be camelCase, PascalCase, kebab-case? + "entities": [ + { + "@context": "https://schema.org", + "@id": "", + "@type": "Message", + "type": "https://schema.org/Message", + + "keywords": ["WelcomeMessage"], // What name should we put in? Pre-chat message, Starter Prompts, greeting, welcome? + "sender": { + "@type": "Person", + "description": "I can help you with anything around you. Just let me know.", + "image": "https://.../bot.svg", // Could be data URI of an image. + "name": "Secretary Bot" + }, + "potentialActions": [ + { + "@type": "SendAction", + "name": "Check time", + "object": { + "@type": "Message", + "text": "What time is it now?" + } + }, + { + "@type": "SendAction", + "name": "Check weather", + "object": { + "@type": "Message", + "text": "Do I need to bring an umbrella?" + } + } + ] + } + ] +} +```