Chore: Add docs for Twilio Whatsapp/SMS channel (#804)
This commit is contained in:
parent
7e62000e1b
commit
8655466fa5
12 changed files with 96 additions and 10 deletions
|
@ -1,18 +1,17 @@
|
|||
.error {
|
||||
#{$all-text-inputs},
|
||||
select,
|
||||
.multiselect > .multiselect__tags {
|
||||
@include thin-border( darken(get-color(alert), 25%));
|
||||
@include thin-border(darken(get-color(alert), 25%));
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
.message {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: -$space-normal;
|
||||
margin-bottom: $space-one;
|
||||
color: darken(get-color(alert), 25%);
|
||||
display: block;
|
||||
font-weight: $font-weight-normal;
|
||||
margin-bottom: $space-one;
|
||||
margin-top: -$space-normal;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -25,7 +24,7 @@ input {
|
|||
}
|
||||
|
||||
.input-wrap {
|
||||
font-size: $font-size-small;
|
||||
color: $color-heading;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -91,6 +91,10 @@
|
|||
"PLACEHOLDER": "Please enter the phone number from which message will be sent.",
|
||||
"ERROR": "Please enter a valid value. Phone number should start with `+` sign."
|
||||
},
|
||||
"API_CALLBACK": {
|
||||
"TITLE": "Callback URL",
|
||||
"SUBTITLE": "You have to configure the message callback URL in Twilio with the URL mentioned here."
|
||||
},
|
||||
"SUBMIT_BUTTON": "Create Twilio Channel",
|
||||
"API": {
|
||||
"ERROR_MESSAGE": "We were not able to authenticate Twilio credentials, please try again"
|
||||
|
|
|
@ -13,6 +13,14 @@
|
|||
>
|
||||
</woot-code>
|
||||
</div>
|
||||
<div class="medium-6 small-offset-3">
|
||||
<woot-code
|
||||
v-if="isATwilioInbox"
|
||||
lang="html"
|
||||
:script="twilioCallbackURL"
|
||||
>
|
||||
</woot-code>
|
||||
</div>
|
||||
<router-link
|
||||
class="button success nice"
|
||||
:to="{
|
||||
|
@ -42,7 +50,16 @@ export default {
|
|||
this.$route.params.inbox_id
|
||||
);
|
||||
},
|
||||
isATwilioInbox() {
|
||||
return this.currentInbox.channel_type === 'Channel::TwilioSms';
|
||||
},
|
||||
message() {
|
||||
if (this.isATwilioInbox) {
|
||||
return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
|
||||
'INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE'
|
||||
)}`;
|
||||
}
|
||||
|
||||
if (!this.currentInbox.website_token) {
|
||||
return this.$t('INBOX_MGMT.FINISH.MESSAGE');
|
||||
}
|
||||
|
|
|
@ -100,7 +100,6 @@
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>
|
||||
{{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }}
|
||||
|
@ -155,6 +154,19 @@
|
|||
</woot-submit-button>
|
||||
</settings-section>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="inbox.channel_type === 'Channel::TwilioSms'"
|
||||
class="settings--content"
|
||||
>
|
||||
<settings-section
|
||||
:title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.TITLE')"
|
||||
:sub-title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE')"
|
||||
>
|
||||
<woot-code :script="twilioCallbackURL" lang="html"></woot-code>
|
||||
</settings-section>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="inbox.channel_type === 'Channel::FacebookPage'"
|
||||
class="settings--content"
|
||||
|
|
|
@ -3,5 +3,8 @@ export default {
|
|||
hostURL() {
|
||||
return window.chatwootConfig.hostURL;
|
||||
},
|
||||
twilioCallbackURL() {
|
||||
return `${this.hostURL}/twilio/callback`;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
BIN
docs/channels/images/twilio/create_twilio_inbox.png
Normal file
BIN
docs/channels/images/twilio/create_twilio_inbox.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 894 KiB |
BIN
docs/channels/images/twilio/finish_inbox.png
Normal file
BIN
docs/channels/images/twilio/finish_inbox.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 859 KiB |
BIN
docs/channels/images/twilio/inbox_create.png
Normal file
BIN
docs/channels/images/twilio/inbox_create.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 850 KiB |
BIN
docs/channels/images/twilio/inbox_settings.png
Normal file
BIN
docs/channels/images/twilio/inbox_settings.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 668 KiB |
BIN
docs/channels/images/twilio/list_of_channels.png
Normal file
BIN
docs/channels/images/twilio/list_of_channels.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 941 KiB |
BIN
docs/channels/images/twilio/twilio_console.png
Normal file
BIN
docs/channels/images/twilio/twilio_console.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 31 KiB |
51
docs/channels/whatsapp-sms-twilio.md
Normal file
51
docs/channels/whatsapp-sms-twilio.md
Normal file
|
@ -0,0 +1,51 @@
|
|||
---
|
||||
path: "/docs/channels/whatsapp-sms-twilio"
|
||||
title: "How to create a Whatsapp/SMS channel with Twilio?"
|
||||
---
|
||||
|
||||
**Step 1**. Click on "Add Inbox" button from Settings > Inboxes page.
|
||||
|
||||
![sms_create](./images/twilio/inbox_create.png)
|
||||
|
||||
**Step 2**. Click on "Twilio" icon.
|
||||
|
||||
![list_of_channels](./images/twilio/list_of_channels.png)
|
||||
|
||||
**Step 3**. Configure the inbox.
|
||||
|
||||
These are input required to create this channel
|
||||
|
||||
| Input | Description | Where can I find it |
|
||||
| -- | -- | -- |
|
||||
| Channel Name | This is the name inbox, this will used across the application | N/A |
|
||||
| Channel Type | Select SMS if you are integrating SMS channel, select Whatsapp if you have a verified Whatsapp number in Twilio | N/A |
|
||||
| Phone Number | This is number you will be using to communicate with you customer, this has to be verified in Twilio | Enter your number as in Twilio Dashboard |
|
||||
| Account SID | Account SID in Twilio Console | Login to Twilio Console, you would be able to see Account SID and Auth Token |
|
||||
| Auth Token | Auth token for the account | Login to Twilio Console, you would be able to see Account SID and Auth Token |
|
||||
|
||||
![create_twilio](./images/twilio/create_twilio_inbox.png)
|
||||
|
||||
**Step 4**. "Add agents" to your inbox.
|
||||
|
||||
![add_agents](./images/add_agents.png)
|
||||
|
||||
**Step 6**. Hooray! You have sucessfully created a whatsapp/sms inbox.
|
||||
|
||||
![finish_inbox](./images/twilio/finish_inbox.png)
|
||||
|
||||
If it is an SMS Channel then you don't need to do anything else, you will start receiving the messages in the dashboard whenever a customer sends you one.
|
||||
|
||||
If you are connecting a **Whatsapp** channel, you have configure a callback URL in the Twilio inbox.
|
||||
|
||||
- Login to your Twilio Console.
|
||||
- Go to `Programmable SMS > Whatsapp > Senders`
|
||||
- You will be able to see your phone number. Click on it, it will display a field like the one below.
|
||||
|
||||
![twilio_console](./images/twilio/twilio_console.png)
|
||||
|
||||
- Provide `https://app.chatwoot.com/twilio/callback` as the value for `WHEN A MESSAGE COMES IN` input.
|
||||
|
||||
|
||||
**Step 7**. If you want to update the agents who have access to the inbox, you can go to Settings > Inboxes.
|
||||
|
||||
![inbox_settings](./images/twilio/inbox_settings.png)
|
Loading…
Reference in a new issue