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

Lightning Web ComponentでチャットのUIをカスタマイズしよう / Enh...

Shun Kosaka
August 23, 2019

Lightning Web ComponentでチャットのUIをカスタマイズしよう / Enhance Chat UI with LWC

2019.08.23 の Salesforce Developer Meetup Tokyo #21 での登壇資料です。
Salesforce の Summer '19 リリースノートの [Lightning Web コンポーネントを使用したチャットメッセージのカスタマイズ] を簡単に解説しています。
https://releasenotes.docs.salesforce.com/ja-jp/summer19/release-notes/rn_embedded_service_web_lwc.htm

Shun Kosaka

August 23, 2019
Tweet

More Decks by Shun Kosaka

Other Decks in Technology

Transcript

  1. メッセージのテキストで判断するしかないので、 先頭にキーワードを⼊れる等のルールを決めると実装しやすい コンテンツ振り分けの実装例 Bot の設定 <template if:true={isYoutube}> <div class="chatMessage agent

    youtube"> <iframe src={content} allowfullscreen> </iframe> </div> </template> LWC 表⽰されるメッセージ メッセージの先頭にYOUTUBE:が含まれていたら、 後続のテキストを⽤いてYoutubeの埋め込みタグを表⽰
  2. • message-contentの内容が⼊⼒通りにならないことがある • 記号 < > & “ はそれぞれ &lt;

    &gt; &amp; &quot; に • URL形式のテキストは⾃動的に<a>タグで囲まれる • デフォルトでは何のスタイルも適⽤されない • 開発者ガイドのスタイルを適⽤すると標準の⾒た⽬になるので、これを改修していくと良い 注意事項