diff --git a/app/javascript/dashboard/assets/scss/widgets/_forms.scss b/app/javascript/dashboard/assets/scss/widgets/_forms.scss index b394ba3b8..4606ba673 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_forms.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_forms.scss @@ -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; -} \ No newline at end of file +} diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json index 20122ed82..9f59aab81 100644 --- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json +++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json @@ -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" diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue index accba4cfb..77f4025e8 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue @@ -13,6 +13,14 @@ > +
+ + +
+ + + + +
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)