# 5. Flexで着信を確認する
基本的なセットアップが終わったので、実際に着信確認を行います。
## 5-1. FlexのUIを立ち上げる
[https://www.twilio.com/console](https://www.twilio.com/console)に遷移し、`Launch Flex`をクリックします。
Flex UIページが立ち上がります。
## 5-2. ステータスの変更
Flexにログインしているワーカー(ユーザー)のステータスを確認します。
画像のように`Offline`になっている場合は、左上の箇所をクリックして`Avaliavle`に変更します。
`Offline`だと着信を受けることができません。
## 5-3. 電話をかけてみよう
[4-2. 日本の電話番号の取得] で購入した電話番号に電話をかけてみましょう。
現在有効な電話番号は、[https://www.twilio.com/console/phone-numbers/incoming](https://www.twilio.com/console/phone-numbers/incoming)で確認できます。
着信中、FlexのUIでは以下の画像のように表示されます。
`Accept`をクリックすると実際に通話できます。
ワーカー側の画面は上記のように変化します。
## 5-4. チャットをしてみよう
Flexをデプロイするとデフォルトでチャットも使用できます。
[https://flex.twilio.com/admin/](https://flex.twilio.com/admin/) の WEBCHATの`LAUNCH`をクリックします。
クライアント(エンドユーザー)用のサンプル画面が起動します。
サンプル画面で何か文字を打ってみると、
Flex UIでは電話の時と同じで着信を受けるか受けないか選択できます。
`Accept`をクリックすると、ワーカーは以下のような画面に遷移します。
クライアント側が送ったメッセージが表示されています。
実際に返信してみましょう。
お互いの画面で入力した文字が同期されていることがわかります。
## 5-5. チャットをWebサイトに埋め込む
Flexが用意しているチャットウェジェットをWebサイトに埋め込む方法を紹介します。
参考: [https://www.twilio.com/docs/flex/webchat/setup](https://www.twilio.com/docs/flex/webchat/setup)
CDN, npmを使う方法が現在提供されていますが、本ハンズオンではCDN の方を試します。
### 1. index.htmlを作成
自身のPCで以下の内容でindex.htmlを作成します。
```html
Webチャットサンプル
```
### 2. headにscriptタグを貼り付ける
作成したhtmlのheadの部分に以下のタグを貼り付けます
```html
```
### 3. Webチャットの初期設定を行うscriptタグを貼り付ける
作成したhtmlのbodyの中に以下のタグを貼り付けます。
```html
```
`accountSid`と`flexFlowSid`は自身の作成したFlexプロジェクトのものに変更します。
[https://flex.twilio.com/admin/developers/](https://flex.twilio.com/admin/developers/)で見つけることができます。
### 4. 表示させて確認してみる
お使いのブラウザでindex.htmlを開いてみます。
右下に`Chat with us`というボタンがあるのでクリックします。
するとメッセージが打てるウィジェットが起動するので、先ほどと同じように何か文字を打ってFlex上でも確認してみましょう。
この章は以上で終了になります。