This project is how to customize Twilio Flex WebChat UI Japanese locale. Twilio Flex WebChat UI を日本語化します。
- Twilio CLI
- CLI Serverless Plugins
また、Twilio Flex がセットアップされている必要があります。
このプログラムをセットアップには、以下の 2 つの情報が必要です。
- Twilio Account Sid: Twilio のアカウント SID(AC から始まる文字列)
- Twilio AuthToken: アカウント SID とセットで使う AuthToken
- Twilio Flex Flow Sid: WebChat 用の Twilio Flex Flow Sid(FO から始まる文字列)
Flex Flow Sid は、以下の場所を確認してください。
- Flex プロジェクトの管理コンソールにログインします。
- Flex メニューを選択し、さらにメッセージの送受信を選択します。
- webチャンネルのIDENTITYに表示されている FO から始まる文字列が Flow Sid です。
git clone https://github.com/mobiliebiz/flex-webchat-ja.git
cd flex-webchat-ja
npm install
cp .env.sample .env
コピーした.env をエディタで開き、先程調べておいた AccountSid と AuthToken、 FlexFlowSid を更新します。
npm start
ブラウザで http://localhost:3000/index.html にアクセスします。
なお、Flex 側も起動しておかないとチャットへの応答ができません。
twilio serverless:deploy --force
.
├── README.md このファイルです。
├── assets
│ ├── css
│ │ └── style.css
│ ├── i18n.js プレエンゲージフォームや日本語テンプレートを規定しているファイルです。
│ ├── images
│ ├── index.html WebChatを表示するHTMLファイルです。
│ └── webchat.js WebChatを実装するJavaScriptファイルです。
├── .env.sample 環境変数の雛形です。
├── functions
│ └── config.js 環境変数を取得するためのFunctionsです。
├── node_modules
├── package-lock.json
└── package.json