LWCͰνϟοτͷUIΛΧελϚΠζ͠Α͏ @sfdgTokyo meetup #21 Shun Kosaka | Accenture | @shunkosa 

今⽇ご紹介する新機能 

ここをLWCで上書きできます 何ができるのかを⼀⾔で 

• 動画や画像などリッチなコンテンツを表⽰できる • ネイティブSDKと違ってWeb チャットは標準でプレーンテキスト(とURL)のみ対応 • (ちなみに)メッセージのスタイルを変えるだけなら設定でもできる 活⽤例 

組み込みサービス(旧Snap-ins)の設定でコンポーネントを選択するだけ 設定⽅法 

受け取ることができるのは2つのパラメータだけ • message-content : メッセージのテキスト • user-type : エージェント(Bot)か訪問者かを区別するためのテキスト ライブラリの仕様 

メッセージのテキストで判断するしかないので、 先頭にキーワードを⼊れる等のルールを決めると実装しやすい コンテンツ振り分けの実装例 Bot の設定 LWC 表⽰されるメッセージ メッセージの先頭にYOUTUBE:が含まれていたら、 後続のテキストを⽤いてYoutubeの埋め込みタグを表⽰ 

• message-contentの内容が⼊⼒通りにならないことがある • 記号 < > & “ はそれぞれ < > & " に • URL形式のテキストは⾃動的にタグで囲まれる • デフォルトでは何のスタイルも適⽤されない • 開発者ガイドのスタイルを適⽤すると標準の⾒た⽬になるので、これを改修していくと良い 注意事項 

• LWCを⽤いると、ネイティブのモバイルアプリを開発しなくても、 リッチなWeb チャットUIが提供できる • テキスト以外のコンテンツをボットのUX設計に取り込もう︕ おわりに https://github.com/shunkosa/einstein-bots-ui-recipe 遊んでみてね︕ 

Thank you for your attention ありがとうございました"