Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VoiceLunchJP#27 Voiceflow Updates 2022 (EN)

Kuniaki Shimizu
December 15, 2022

VoiceLunchJP#27 Voiceflow Updates 2022 (EN)

Introduced on VoiceLunchJP#27 and my personal summary of Voiceflow new features and changes in 2022.

https://voicelunchjp.connpass.com/event/268568/

Kuniaki Shimizu

December 15, 2022
Tweet

More Decks by Kuniaki Shimizu

Other Decks in Design

Transcript

  1.     
    Updates 2022
    #voicelunchjp #vfjug #voiceflow

    View full-size slide

  2. About me
    @VoiceflowHQ | #VFJUG

    View full-size slide

  3. About me
    @VoiceflowHQ | #VFJUG
    Kuniaki Shimizu (@kun432)
    ● Freelance Infrastructure engineer
    ● Kobe, Japan
    ● Kubernetes/AWS/Terraform, etc.
    ● 4 years experience of Voiceflow
    ● attend/organize communities
    ○ #VoiceLunchJP
    ○ #AAJUG (Amazon Alexa Japan User Group)
    ○ #VFJUG (Voiceflow Japan User Group)

    View full-size slide

  4. https://www.facebook.com/groups/vfjug/
    Voiceflow Japan User Group
    @VoiceflowHQ | #VFJUG

    View full-size slide

  5. 『Voiceflow & VUI』
    ● first Voiceflow fan book in Japan
    ● A wide range of topics covered:
    Introductory/intermediate/advanced, prototyping, VUI
    design, IoT/cloud integration, and more!
    ● Authored by Top VUI professionals in Japan
    ● Including preface by Voiceflow officially!
    Price: 1500JPY
    @VoiceflowHQ | #VFJUG
    *End of sales, sorry.

    View full-size slide

  6. Today’s topic
    @VoiceflowHQ | #VFJUG

    View full-size slide

  7. Updates 2022
    @VoiceflowHQ | #VFJUG
    ● Voiceflow is evolving soooo fast!
    ● Wil introduce some of the major new
    features/changes released in 2022
    (as an User)

    View full-size slide

  8. @VoiceflowHQ | #VFJUG
    Disclaimer
    ● Information in this document is as of the beginning of
    December 2022. It may be subject to change in the
    future.
    ● The information is based on my personal research.
    Please note that the contents may be incomplete or
    wrong.

    View full-size slide

  9. New Features/Changes in 2022
    @VoiceflowHQ | #VFJUG

    View full-size slide

  10. @VoiceflowHQ | #VFJUG
    New Features/Changes in 2022
    1. New User Interface
    2. User Persona
    3. Web Chat Project
    4. Custom NLU for custom assitant
    *Based on https://www.voiceflow.com/category/product-release
    *There are more!

    View full-size slide

  11. @VoiceflowHQ | #VFJUG
    1. New User Interface

    View full-size slide

  12. @VoiceflowHQ | #VFJUG
    2019

    View full-size slide

  13. @VoiceflowHQ | #VFJUG
    2020〜2021

    View full-size slide

  14. @VoiceflowHQ | #VFJUG
    and 2022!

    View full-size slide

  15. @VoiceflowHQ | #VFJUG
    1. New User Interface
    Challenge of GUI:
    ● Lots of blocks, lots of lines...
    ● Unmanageable when project is large/complex
    ● Similar/same blocks in multiple places

    View full-size slide

  16. @VoiceflowHQ | #VFJUG
    1. New User Interface

    View full-size slide

  17. @VoiceflowHQ | #VFJUG
    want to manage this
    efficiently!

    View full-size slide

  18. @VoiceflowHQ | #VFJUG
    1. New User Interface
    ● make it even easier for designers to design.
    ● My favorites
    ○ Actions
    ○ Topics / Components / Libraries
    ● Important changes for Alexa

    View full-size slide

  19. @VoiceflowHQ | #VFJUG
    Actions
    ● What we often do at a branch:
    ○ Change contexts for each branch
    ○ Set variables for each branch
    ● More branches, more lines and blocks.
    Repeat the same things for each branch.
    ● Using Actions, we can make these simple in 1 block!

    View full-size slide

  20. @VoiceflowHQ | #VFJUG
    Actions

    View full-size slide

  21. @VoiceflowHQ | #VFJUG
    Topics/Components/Libraries
    feature meaning Use case:
    ex: banking app
    Topics
    Separate flows for each intent
    Keep each small and manageable.
    ● from the Main flow to…
    ・balance inquiry flow
    ・transfer flow
    Components
    Make typical/frequent processes into
    a re-usable component.
    *can call it anytime.
    ● Initializing for API
    ● API requests
    ● result dialog
    Libraries
    Make typical/frequent processes into
    a re-usable component.
    *can copy it anytime.
    ● make basic API request process
    into a template.
    ● copy from its template and fix for
    each processes such as balance
    inquiry or transfer.

    View full-size slide

  22. @VoiceflowHQ | #VFJUG
    Ex: Topics
    Home
    Ordering
    Asking open hours
    Each context (intent) can be
    managed as a separate flow.

    View full-size slide

  23. @VoiceflowHQ | #VFJUG
    Important Changes for Alexa
    ● Alexa-specific blocks and settings are sunsetting:
    ○ Purchase/Cancel(ISP)
    ○ Reminder
    ○ UserInfo
    ○ Permissions
    ○ Account Linking
    ○ Skill events…
    For these features, how can we implment?

    View full-size slide

  24. @VoiceflowHQ | #VFJUG
    Important Changes for Alexa
    We can still implement these using
    Directive/Event Steps!

    View full-size slide

  25. @VoiceflowHQ | #VFJUG
    Alexa APIs by Amazon, IMO
    ● Before
    ○ each API for each feature.
    ○ the more features, the more “various” APIs.
    ○ need to implement differently for each block
    ● Now
    ○ seems to commonalize those into “Skill Connections”
    ○ A single endpoint, different JSON object for each
    feature.
    ○ Required user interactions and necessary processing
    outside of skills.
    ○ Skills just receive its response.

    View full-size slide

  26. @VoiceflowHQ | #VFJUG
    Alexa APIs by Amazon, IMO
    ● Before
    ○ each API for each feature.
    ○ the more features, the more “various” APIs.
    ○ need to implement differently for each block
    ● Now
    ○ seems to commonalize those into “Skill Connections”
    ○ A single endpoint, different JSON object for each
    feature.
    ○ Required user interactions and necessary processing
    outside of skills.
    ○ Skills just receive its response.
    Directive
    Event

    View full-size slide

  27. @VoiceflowHQ | #VFJUG
    Important Changes for Alexa
    ● Directive

    View full-size slide

  28. @VoiceflowHQ | #VFJUG
    Important Changes for Alexa
    ● Event

    View full-size slide

  29. @VoiceflowHQ | #VFJUG
    Important Changes for Alexa
    looks difficult and complex…?

    View full-size slide

  30. @VoiceflowHQ | #VFJUG
    Important Changes for Alexa
    ● Documents are now ready!!!
    https://developer.voiceflow.com/docs

    View full-size slide

  31. @VoiceflowHQ | #VFJUG
    2. User Persona

    View full-size slide

  32. @VoiceflowHQ | #VFJUG
    ● Personalized conversation flow
    ○ I am using it for the first time / I have used it many
    times
    ○ I live in Tokyo / I live in Osaka
    ○ Today is my birthday/other than that
    ● need to test for each different condition
    set up user personas,
    then we can test specific conditions!
    2. User Persona

    View full-size slide

  33. @VoiceflowHQ | #VFJUG
    1st
    time
    after
    2nd time
    2. User Persona

    View full-size slide

  34. @VoiceflowHQ | #VFJUG
    2. User Persona

    View full-size slide

  35. @VoiceflowHQ | #VFJUG
    2. User Persona

    View full-size slide

  36. @VoiceflowHQ | #VFJUG
    2. User Persona

    View full-size slide

  37. @VoiceflowHQ | #VFJUG
    3. Web Chat Project

    View full-size slide

  38. @VoiceflowHQ | #VFJUG
    3. Web Chat Project
    ● Quickly create a website-embedded chatbot using
    only Voiceflow!
    ○ Create a "Web Chat" type project
    ○ Create a conversation flow
    ○ HTML/JavaScript will be output
    ○ Just paste it into your website!
    Sooooo easy!!!

    View full-size slide

  39. @VoiceflowHQ | #VFJUG
    3. Web Chat Project

    View full-size slide

  40. @VoiceflowHQ | #VFJUG
    3. Web Chat Project

    View full-size slide

  41. @VoiceflowHQ | #VFJUG
    3. Web Chat Project

    View full-size slide

  42. @VoiceflowHQ | #VFJUG
    3. Web Chat Project

    View full-size slide

  43. @VoiceflowHQ | #VFJUG
    Chat histories in Transcripts

    View full-size slide

  44. @VoiceflowHQ | #VFJUG
    More in future!

    View full-size slide

  45. @VoiceflowHQ | #VFJUG
    4. Custom NLU for custom assitants

    View full-size slide

  46. @VoiceflowHQ | #VFJUG
    4. Custom NLU for custom assitants
    Enterprise plan only🙇

    View full-size slide

  47. @VoiceflowHQ | #VFJUG
    4. Custom NLU for custom assitants
    ● Can choose NLU for custom assitant
    ● Import/Export models and deploy for Dialogflow ES/CX.
    Import/Export models for others.
    ○ Voiceflow (default)
    ○ Dialogflow ES/CX
    ○ IBM Watson
    ○ Microsoft LUIS
    ○ Rasa
    ○ Salesforce Einstein
    ○ Amazon Lex
    ○ Nuance Mix

    View full-size slide

  48. @VoiceflowHQ | #VFJUG
    4. Custom NLU for custom assitants
    ● My favorite is Dialogflow ES/CX!
    ○ 1-click deploy
    ○ More Japanese-language support such as various and
    rich built-in entities.
    ○ Easy integrations with SNS, phone, web chat, etc
    using Dialogflow Integrations.
    ○ need GCP account and GCP usage fees.

    View full-size slide

  49. @VoiceflowHQ | #VFJUG
    4. Custom NLU for custom assitants

    View full-size slide

  50. @VoiceflowHQ | #VFJUG
    many more features!

    View full-size slide

  51. @VoiceflowHQ | #VFJUG
    Try it out!!

    View full-size slide

  52. @VoiceflowHQ | #VFJUG
    Can’t wait new features in 2023!!!

    View full-size slide

  53. Thanks!
    #voicedg #voiceflow #vfjug

    View full-size slide

  54. @VoiceflowHQ | #VFJUG
    Appendix1:
    About Web Chat Project and Dialog Management API

    View full-size slide

  55. @VoiceflowHQ | #VFJUG
    ● Actually, using Dialog Management API, we have been
    able to create Web chatbots ever.
    ● Dialog Management API
    ○ For custom assistant.
    ○ enable to access your conversational flow in
    Voiceflow via API.
    ● However…
    ○ need to code for frontend UI(JavaScript/CSS, etc)
    ○ need to code for backend app
    ○ CORS, Same-site Cookies, etc…
    Web Chat Project is easier than ever!
    About Web Chat Project and Dialog Management API

    View full-size slide

  56. @VoiceflowHQ | #VFJUG
    ● OTOH, Dialog Management API expands the possibilities!
    ○ SNS bot (Slack/FB Messagener/MS Teams,etc)
    ○ Phone/IVR (Twilio)
    ○ Smartphone Apps, Web Apps, etc.
    ○ Enable to connect every interfaces to Voiceflow!
    ● 2 APIs for each use-cases
    ○ State API - simple and easy
    ○ Stateless API - enable to manage sensitive data on
    your own.
    About Dialog Management API, See Apendix.
    About Web Chat project and Dialog Management API

    View full-size slide

  57. @VoiceflowHQ | #VFJUG
    Appendix2:
    Dialog Management API(2021)

    View full-size slide

  58. @VoiceflowHQ | #VFJUG
    Dialog Management API
    ● For custom assitants
    ● enable to access to your conversational flow in
    Voiceflow via API.

    View full-size slide

  59. @VoiceflowHQ | #VFJUG
    Dialog Management API
    customers
    develop
    Apps
    Web
    Chat bot
    Frontend
    Voiceflow
    Conversational
    Model
    Backend
    processes
    Custom
    Assistants
    Projects
    A
    P
    I
    Developers
    Designers
    design
    publish
    INPUT/
    ASR/STT
    NLU/NLP,
    Backend processes
    RESPONSE
    /TTS
    Custom Assistant

    View full-size slide

  60. @VoiceflowHQ | #VFJUG
    Dialog Management API
    ● Any frontends
    ○ SNS: LINE, Slack, Messenger, etc
    ○ Phones/IVR: Twilio
    ○ Smartphone Apps/Web Apps
    ○ Own Custom Smartspeakers
    ● Developers and designers can share the workload.
    ● One conversational flow, multiple frontends.
    ○ Fix conversational flow once, change everything.
    ○ Frontend/Backend are simply connects to Dialog
    Management API and customize requests/responses
    for each.

    View full-size slide

  61. @VoiceflowHQ | #VFJUG
    ● State API
    ○ Request with User ID only.
    ○ Voiceflow manages conversational “State”.
    ○ Response varies everytime.
    ○ Simple and Easy.
    ● Stateless API
    ○ Request with whole “State” object.
    ○ manage conversational “State” on your own.
    ○ With same “State” object, always same response.
    ○ Enable to manage sensitive data on your own.
    Important for business use-cases.
    2 APIs for Dialog Management API

    View full-size slide

  62. @VoiceflowHQ | #VFJUG
    ex1: SNS Integrations (Slack,etc)
    ユーザー SNS
    apps
    SNS Platform
    Voiceflow
    Conversational
    Model
    Backend
    processes
    A
    P
    I
    Input
    API
    Access
    PaaS
    Response
    状態
    データ
    NLU/NLP,
    Backend processes

    View full-size slide

  63. Phone+
    Voice/Text
    converts
    @VoiceflowHQ | #VFJUG
    ex2: Phone/IVR Integrations
    (Twilio,etc)
    Customers
    IVR Platform/Phone Gateway
    Voiceflow
    Conversational
    Model
    Backend
    processes
    A
    P
    I
    API
    Access
    PaaS
    ASR+STT
    TTS
    State
    Data
    NLU/NLP,
    Backend processes

    View full-size slide

  64. @VoiceflowHQ | #VFJUG
    ex3: Web Chatbot Integrations
    Customers
    Web site
    Voiceflow
    Conversational
    Model
    Backend
    processes
    A
    P
    I
    API
    Access
    PaaS
    INPUT
    RESPONSE
    Web
    Chatbot
    Ajax
    Client
    State
    Data
    NLU/NLP/
    Backend Processses

    View full-size slide