このチュートリアルではチャットボットの作り方を紹介します。

chatbot_preview_smaller.mp4

→このチュートリアルで使用されているサンプルのダウンロードはこちらより

デザインの設定

チャットのアイコンの作成する

1. クイックツールパネルからIconを選択するか、キーボードの ⌥ + I をクリックします。キャンバス上で任意の場所をクリックし、アイコンを配置します。
2. アイコンをクリックし、プロパティパネルのSearch icons（アイコンの検索）フィールドに「chat（チャット）」と検索します。
3. 画面右下に表示させるために、キャンバス右下にチャットアイコンを配置します。

チャットウィンドウの背景を作成する

1. クイックツールからBoxを選択するか、キーボードの B を押して、キャンバス上の任意の場所をクリックして配置します。
2. チャットアイコンの横にBoxを配置します。

チャットウィンドウのヘッダーを作成する

1. クイックツールからBoxを選択するか、キーボードの B を押して、最初のボックスの上部をクリックして配置します。
2. ボックスの中をダブルクリックしてテキストカーソルを開始し、ヘッダーテキストとして「Customer support（カスタマーサポート）」と入力します。
3. クイックツールからIcon（アイコン）を選択するか、キーボードの ⌥ + I をクリックします。Chat要素の反対側のヘッダー内をクリックして、Chat要素を配置します。
4. アイコンをクリックして選択し、プロパティパネルのSearch icons（アイコンの検索）フィールドに「mark close（マーククローズ」と入力します。
5. ページとレイヤーの下にあるアイコン要素を選択し、名前を「Quit（終了）」に変更します。
6. ⌘ を押したままBoxとQuit（終了）をクリックし、 ⌘ ＋ G でグループ化します。

グループの名前をTop bar（トップバー）に変更します。