diff --git a/app/javascript/widget/components/ChatHeader.vue b/app/javascript/widget/components/ChatHeader.vue
index 07f908455..edaf8049e 100644
--- a/app/javascript/widget/components/ChatHeader.vue
+++ b/app/javascript/widget/components/ChatHeader.vue
@@ -1,8 +1,11 @@
@@ -13,17 +16,21 @@ import { IFrameHelper } from 'widget/helpers/utils';
export default {
name: 'ChatHeader',
- computed: {
- ...mapGetters({
- widgetColor: 'appConfig/getWidgetColor',
- }),
- },
props: {
+ avatarUrl: {
+ type: String,
+ default: '',
+ },
title: {
type: String,
default: '',
},
},
+ computed: {
+ ...mapGetters({
+ widgetColor: 'appConfig/getWidgetColor',
+ }),
+ },
methods: {
closeWindow() {
if (IFrameHelper.isIFrame()) {
@@ -48,12 +55,23 @@ export default {
box-sizing: border-box;
color: $color-white;
+ .header-branding {
+ display: flex;
+ align-items: center;
+ }
+
.title {
font-size: $font-size-large;
font-weight: $font-weight-medium;
color: $color-heading;
}
+ img {
+ height: 24px;
+ width: 24px;
+ margin-right: $space-small;
+ }
+
.close-button {
display: none;
}
diff --git a/app/javascript/widget/components/ChatHeaderExpanded.vue b/app/javascript/widget/components/ChatHeaderExpanded.vue
index 05d1a239b..dc7c29e2d 100755
--- a/app/javascript/widget/components/ChatHeaderExpanded.vue
+++ b/app/javascript/widget/components/ChatHeaderExpanded.vue
@@ -1,9 +1,6 @@
-
+
{{ introHeading }}
@@ -21,14 +18,17 @@ import { IFrameHelper } from 'widget/helpers/utils';
export default {
name: 'ChatHeaderExpanded',
props: {
+ avatarUrl: {
+ type: String,
+ default: '',
+ },
introHeading: {
type: String,
- default: 'Hi there ! 🙌🏼',
+ default: '',
},
introBody: {
type: String,
- default:
- 'We make it simple to connect with us. Ask us anything, or share your feedback.',
+ default: '',
},
},
computed: {
@@ -53,14 +53,14 @@ export default {
@import '~widget/assets/scss/mixins.scss';
.header-expanded {
- padding: $space-larger $space-medium $space-large;
+ padding: $space-large $space-medium $space-large;
width: 100%;
box-sizing: border-box;
position: relative;
.logo {
- width: 64px;
- height: 64px;
+ width: 56px;
+ height: 56px;
}
.close {
@@ -74,7 +74,7 @@ export default {
font-size: $font-size-mega;
font-weight: $font-weight-normal;
margin-bottom: $space-slab;
- margin-top: $space-large;
+ margin-top: $space-medium;
}
.body {
diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue
index 5a1545277..d567d9a32 100755
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -3,10 +3,15 @@
@@ -55,6 +60,15 @@ export default {
showAvailableAgents() {
return this.availableAgents.length > 0 && this.conversationSize < 1;
},
+ introHeading() {
+ return this.channelConfig.welcomeTitle || 'Hi there ! 🙌🏼';
+ },
+ introBody() {
+ return (
+ this.channelConfig.welcomeTagline ||
+ 'We make it simple to connect with us. Ask us anything, or share your feedback.'
+ );
+ },
},
};
diff --git a/app/views/api/v1/accounts/inboxes/create.json.jbuilder b/app/views/api/v1/accounts/inboxes/create.json.jbuilder
index b3d1ea7f8..a596c0dd6 100644
--- a/app/views/api/v1/accounts/inboxes/create.json.jbuilder
+++ b/app/views/api/v1/accounts/inboxes/create.json.jbuilder
@@ -2,6 +2,7 @@ json.id @inbox.id
json.channel_id @inbox.channel_id
json.name @inbox.name
json.channel_type @inbox.channel_type
+json.avatar_url @inbox.try(:avatar_url)
json.website_token @inbox.channel.try(:website_token)
json.widget_color @inbox.channel.try(:widget_color)
json.website_url @inbox.channel.try(:website_url)
@@ -9,3 +10,4 @@ json.welcome_title @inbox.channel.try(:welcome_title)
json.welcome_tagline @inbox.channel.try(:welcome_tagline)
json.agent_away_message @inbox.channel.try(:agent_away_message)
json.web_widget_script @inbox.channel.try(:web_widget_script)
+json.enable_auto_assignment @inbox.enable_auto_assignment
diff --git a/app/views/api/v1/accounts/inboxes/update.json.jbuilder b/app/views/api/v1/accounts/inboxes/update.json.jbuilder
index b3d1ea7f8..a596c0dd6 100644
--- a/app/views/api/v1/accounts/inboxes/update.json.jbuilder
+++ b/app/views/api/v1/accounts/inboxes/update.json.jbuilder
@@ -2,6 +2,7 @@ json.id @inbox.id
json.channel_id @inbox.channel_id
json.name @inbox.name
json.channel_type @inbox.channel_type
+json.avatar_url @inbox.try(:avatar_url)
json.website_token @inbox.channel.try(:website_token)
json.widget_color @inbox.channel.try(:widget_color)
json.website_url @inbox.channel.try(:website_url)
@@ -9,3 +10,4 @@ json.welcome_title @inbox.channel.try(:welcome_title)
json.welcome_tagline @inbox.channel.try(:welcome_tagline)
json.agent_away_message @inbox.channel.try(:agent_away_message)
json.web_widget_script @inbox.channel.try(:web_widget_script)
+json.enable_auto_assignment @inbox.enable_auto_assignment
diff --git a/app/views/widgets/show.html.erb b/app/views/widgets/show.html.erb
index ddef32141..dd145fb68 100644
--- a/app/views/widgets/show.html.erb
+++ b/app/views/widgets/show.html.erb
@@ -8,9 +8,10 @@
window.chatwootWebChannel = {
websiteName: '<%= @web_widget.inbox.name %>',
widgetColor: '<%= @web_widget.widget_color %>',
- websiteToken: '<%= @web_widget.welcome_title %>',
+ websiteToken: '<%= @web_widget.website_token %>',
welcomeTitle: '<%= @web_widget.welcome_title %>',
welcomeTagline: '<%= @web_widget.welcome_tagline %>',
+ avatarUrl: '<%= @web_widget.inbox.avatar_url %>',
}
window.chatwootPubsubToken = '<%= @contact.pubsub_token %>'
window.authToken = '<%= @token %>'
diff --git a/swagger/definitions/resource/inbox.yml b/swagger/definitions/resource/inbox.yml
index 375f3be4f..92a57d1a0 100644
--- a/swagger/definitions/resource/inbox.yml
+++ b/swagger/definitions/resource/inbox.yml
@@ -3,6 +3,12 @@ properties:
id:
type: number
description: ID of the inbox
+ name:
+ type: string
+ description: The name of the inbox
+ website_url:
+ type: string
+ description: Website URL
channel_type:
type: string
description: The type of the inbox
@@ -21,3 +27,12 @@ properties:
web_widget_script:
type: string
description: Script used to load the website widget
+ welcome_title:
+ type: string
+ description: Welcome title to be displayed on the widget
+ welcome_tagline:
+ type: string
+ description: Welcome tagline to be displayed on the widget
+ agent_away_message:
+ type: string
+ description: A message which will be sent if there is not agent available. This is not available if agentbot is connected
diff --git a/swagger/paths/inboxes/create.yml b/swagger/paths/inboxes/create.yml
index 7a92add34..42cf660d5 100644
--- a/swagger/paths/inboxes/create.yml
+++ b/swagger/paths/inboxes/create.yml
@@ -1,8 +1,8 @@
post:
tags:
- - Widget
- operationId: widgetInboxCreation
- summary: Create a website inbox
+ - Inbox
+ operationId: inboxCreation
+ summary: Create an inbox
description: You can create more than one website inbox in each account
parameters:
- name: data
@@ -11,15 +11,30 @@ post:
schema:
type: object
properties:
- website:
+ name:
+ type: string
+ description: The name of the inbox
+ avatar:
+ type: file
+ description: File for avatar image
+ channel:
type: object
properties:
- website_name:
+ type:
type: string
- description: The name of the inbox
+ enum: ['web_widget']
website_url:
type: string
description: URL at which the widget will be loaded
+ welcome_title:
+ type: string
+ description: Welcome title to be displayed on the widget
+ welcome_tagline:
+ type: string
+ description: Welcome tagline to be displayed on the widget
+ agent_away_message:
+ type: string
+ description: A message which will be sent if there is not agent available. This is not available if agentbot is connected
widget_color:
type: string
description: A Hex-color string used to customize the widget
diff --git a/swagger/paths/inboxes/update.yml b/swagger/paths/inboxes/update.yml
index 35c843469..fe2d360b6 100644
--- a/swagger/paths/inboxes/update.yml
+++ b/swagger/paths/inboxes/update.yml
@@ -16,6 +16,9 @@ patch:
schema:
type: object
properties:
+ name:
+ type: string
+ description: The name of the inbox
enable_auto_assignment:
type: boolean
required: true
@@ -24,6 +27,24 @@ patch:
type: file
required: false
description: 'Image file for avatar'
+ channel:
+ type: object
+ properties:
+ website_url:
+ type: string
+ description: URL at which the widget will be loaded
+ welcome_title:
+ type: string
+ description: Welcome title to be displayed on the widget
+ welcome_tagline:
+ type: string
+ description: Welcome tagline to be displayed on the widget
+ agent_away_message:
+ type: string
+ description: A message which will be sent if there is not agent available. This is not available if agentbot is connected
+ widget_color:
+ type: string
+ description: A Hex-color string used to customize the widget
responses:
200:
description: Success
diff --git a/swagger/paths/index.yml b/swagger/paths/index.yml
index e4944868d..d1959a21e 100644
--- a/swagger/paths/index.yml
+++ b/swagger/paths/index.yml
@@ -1,12 +1,10 @@
-# Widget
-/accounts/{account_id}/widget/inboxes:
- $ref: ./widget/inboxes/create.yml
-/accounts/{account_id}/widget/inboxes/${id}:
- $ref: ./widget/inboxes/update.yml
+
# Inboxes
/accounts/{account_id}/inboxes:
$ref: ./inboxes/index.yml
+/accounts/{account_id}/inboxes:
+ $ref: ./inboxes/create.yml
/accounts/{account_id}/inboxes/{id}:
$ref: ./inboxes/update.yml
/accounts/{account_id}/inboxes/{id}/set_agent_bot:
diff --git a/swagger/swagger.json b/swagger/swagger.json
index 31ab3a226..50a255d32 100644
--- a/swagger/swagger.json
+++ b/swagger/swagger.json
@@ -25,13 +25,13 @@
"application/json; charset=utf-8"
],
"paths": {
- "/accounts/{account_id}/widget/inboxes": {
+ "/accounts/{account_id}/inboxes": {
"post": {
"tags": [
- "Widget"
+ "Inbox"
],
- "operationId": "widgetInboxCreation",
- "summary": "Create a website inbox",
+ "operationId": "inboxCreation",
+ "summary": "Create an inbox",
"description": "You can create more than one website inbox in each account",
"parameters": [
{
@@ -41,17 +41,39 @@
"schema": {
"type": "object",
"properties": {
- "website": {
+ "name": {
+ "type": "string",
+ "description": "The name of the inbox"
+ },
+ "avatar": {
+ "type": "file",
+ "description": "File for avatar image"
+ },
+ "channel": {
"type": "object",
"properties": {
- "website_name": {
+ "type": {
"type": "string",
- "description": "The name of the inbox"
+ "enum": [
+ "web_widget"
+ ]
},
"website_url": {
"type": "string",
"description": "URL at which the widget will be loaded"
},
+ "welcome_title": {
+ "type": "string",
+ "description": "Welcome title to be displayed on the widget"
+ },
+ "welcome_tagline": {
+ "type": "string",
+ "description": "Welcome tagline to be displayed on the widget"
+ },
+ "agent_away_message": {
+ "type": "string",
+ "description": "A message which will be sent if there is not agent available. This is not available if agentbot is connected"
+ },
"widget_color": {
"type": "string",
"description": "A Hex-color string used to customize the widget"
@@ -78,75 +100,6 @@
}
}
},
- "/accounts/{account_id}/widget/inboxes/${id}": {
- "patch": {
- "tags": [
- "Widget"
- ],
- "operationId": "widgetInboxUpdate",
- "summary": "Update a website inbox",
- "description": "Update widget color of an inbox",
- "parameters": [
- {
- "name": "data",
- "in": "body",
- "required": true,
- "schema": {
- "type": "object",
- "properties": {
- "website": {
- "type": "object",
- "properties": {
- "widget_color": {
- "type": "string",
- "description": "A Hex-color string used to customize the widget"
- }
- }
- }
- }
- }
- }
- ],
- "responses": {
- "200": {
- "description": "Success",
- "schema": {
- "$ref": "#/definitions/inbox"
- }
- },
- "404": {
- "description": "Inbox not found"
- },
- "403": {
- "description": "Access denied"
- }
- }
- }
- },
- "/accounts/{account_id}/inboxes": {
- "get": {
- "tags": [
- "Inbox"
- ],
- "operationId": "listAllInboxes",
- "summary": "List all inboxes",
- "description": "List all inboxes available in the current account",
- "responses": {
- "200": {
- "description": "Success",
- "schema": {
- "$ref": "#/definitions/inbox"
- }
- },
- "404": {
- "description": "Inbox not found"
- },
- "403": {
- "description": "Access denied"
- }
- }
- }
- },
"/accounts/{account_id}/inboxes/{id}": {
"patch": {
"tags": [
@@ -170,6 +123,10 @@
"schema": {
"type": "object",
"properties": {
+ "name": {
+ "type": "string",
+ "description": "The name of the inbox"
+ },
"enable_auto_assignment": {
"type": "boolean",
"required": true,
@@ -179,6 +136,31 @@
"type": "file",
"required": false,
"description": "Image file for avatar"
+ },
+ "channel": {
+ "type": "object",
+ "properties": {
+ "website_url": {
+ "type": "string",
+ "description": "URL at which the widget will be loaded"
+ },
+ "welcome_title": {
+ "type": "string",
+ "description": "Welcome title to be displayed on the widget"
+ },
+ "welcome_tagline": {
+ "type": "string",
+ "description": "Welcome tagline to be displayed on the widget"
+ },
+ "agent_away_message": {
+ "type": "string",
+ "description": "A message which will be sent if there is not agent available. This is not available if agentbot is connected"
+ },
+ "widget_color": {
+ "type": "string",
+ "description": "A Hex-color string used to customize the widget"
+ }
+ }
}
}
}
@@ -1076,6 +1058,18 @@
"web_widget_script": {
"type": "string",
"description": "Script used to load the website widget"
+ },
+ "welcome_title": {
+ "type": "string",
+ "description": "Welcome title to be displayed on the widget"
+ },
+ "welcome_tagline": {
+ "type": "string",
+ "description": "Welcome tagline to be displayed on the widget"
+ },
+ "agent_away_message": {
+ "type": "string",
+ "description": "A message which will be sent if there is not agent available. This is not available if agentbot is connected"
}
}
},