Chore: Web widget Inbox Tech Debts (#738)

* Chore: Webwidget Inbox Tech Debts * Additional customization options creating Web Widget * Changes to edit Page for Web Widget * Remove the WebWidget API end points * Minor chores Address: #680, #502 Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>
2020-04-19 23:40:28 +05:30
parent c0ce70e87b
commit 941fbb0d72
46 changed files with 564 additions and 503 deletions
--- a/app/javascript/dashboard/api/channel/webChannel.js
+++ b/app/javascript/dashboard/api/channel/webChannel.js
@@ -2,7 +2,7 @@ import ApiClient from '../ApiClient';

 class WebChannel extends ApiClient {
  constructor() {
-    super('widget/inboxes', { accountScoped: true });
+    super('inboxes', { accountScoped: true });
  }
 }

--- a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
+++ b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
@@ -31,42 +31,39 @@
 .wizard-box {
  .item {
    @include padding($space-normal $space-normal $space-normal $space-medium);
-    position: relative;
    @include background-light;
-    cursor: pointer;

-    &:before,
-    &:after {
-      content: '';
-      position: absolute;
-      width: 2px;
-      height: 100%;
+    cursor: pointer;
+    position: relative;
+
+    &::before,
+    &::after {
      background: $color-border;
+      content: '';
+      height: 100%;
+      position: absolute;
      top: $space-normal;
+      width: 2px;
    }

-    &:before {
-      top: $zero;
+    &::before {
      height: $space-normal;
+      top: $zero;
    }

    &:first-child {
-      &:before {
+      &::before {
        height: 0;
      }
    }

    &:last-child {
-      &:after {
+      &::after {
        height: $zero;
      }
    }

    &.active {
-      // left: 1px;
-      // @include background-white;
-      // @include border-light;
-      // border-right: 0;
      h3 {
        color: $color-woot;
      }
@@ -78,7 +75,7 @@

    &.over {

-      &:after {
+      &::after {
        background: $color-woot;
      }

@@ -86,18 +83,18 @@
        background: $color-woot;
      }

-      &+.item {
-        &:before {
+      & + .item {
+        &::before {
          background: $color-woot;
        }
      }
    }

    h3 {
-      font-size: $font-size-default;
-      padding-left: $space-medium;
-      line-height: 1;
      color: $color-body;
+      font-size: $font-size-default;
+      line-height: 1;
+      padding-left: $space-medium;

      .completed {
        color: $success-color;
@@ -105,25 +102,25 @@
    }

    p {
-      font-size: $font-size-small;
      color: $color-light-gray;
-      padding-left: $space-medium;
+      font-size: $font-size-small;
      margin: 0;
+      padding-left: $space-medium;
    }

    .step {
-      position: absolute;
-      left: $space-normal;
-      top: $space-normal;
-      font-size: $font-size-small;
-      font-weight: $font-weight-medium;
      background: $color-border;
      border-radius: 20px;
-      width: $space-normal;
+      color: $color-white;
+      font-size: $font-size-small;
+      font-weight: $font-weight-medium;
      height: $space-normal;
-      text-align: center;
+      left: $space-normal;
      line-height: $space-normal;
-      color: #fff;
+      position: absolute;
+      text-align: center;
+      top: $space-normal;
+      width: $space-normal;
      z-index: 999;

      i {
@@ -141,10 +138,6 @@
 }

 .inoboxes-list {
-  // @include margin(auto);
-  // @include background-white;
-  // @include border-light;
-  // width: 50%;

  .inbox-item {
    @include margin($space-normal);
@@ -152,16 +145,18 @@
    @include flex-shrink;
    @include padding($space-normal $space-normal);
    @include border-light-bottom();
-    flex-direction: column;
+
    background: $color-white;
    cursor: pointer;
-    width: 20%;
+    flex-direction: column;
    float: left;
    min-height: 10rem;
+    width: 20%;

    &:last-child {
-      margin-bottom: $zero;
      @include border-nil;
+
+      margin-bottom: $zero;
    }

    &:hover {
@@ -174,8 +169,8 @@

    .switch {
      align-self: center;
-      margin-right: $space-normal;
      margin-bottom: $zero;
+      margin-right: $space-normal;
    }

    .item--details {
@@ -187,15 +182,15 @@
      }

      .item--sub {
-        margin-bottom: 0;
        font-size: $font-size-small;
+        margin-bottom: 0;
      }
    }

    .arrow {
      align-self: center;
-      font-size: $font-size-small;
      color: $medium-gray;
+      font-size: $font-size-small;
      opacity: .7;
      transform: translateX(0);
      transition: opacity 0.100s ease-in 0s, transform 0.200s ease-in 0.030s;
@@ -204,18 +199,19 @@
 }

 .settings--content {
-  @include margin($space-small $space-medium);
+  @include margin($space-small $space-larger);

  .title {
    font-weight: $font-weight-medium;
  }

  .code {
+    @include padding($space-one);
+
+    background: $color-background;
    max-height: $space-mega;
    overflow: auto;
    white-space: nowrap;
-    @include padding($space-one);
-    background: $color-background;

    code {
      background: transparent;
@@ -225,8 +221,8 @@
 }

 .login-init {
-  text-align: center;
  padding-top: 30%;
+  text-align: center;

  p {
    @include padding($space-medium);
--- a/app/javascript/dashboard/components/SettingsFormHeader.vue
+++ b/app/javascript/dashboard/components/SettingsFormHeader.vue
@@ -1,69 +0,0 @@
-<template>
-  <div class="row settings--form--header">
-    <div class="medium-8">
-      <p class="title">
-        {{ title }}
-      </p>
-      <p class="sub-head">
-        {{ subTitle }}
-      </p>
-    </div>
-    <div v-if="buttonText" class="medium-4 text-right">
-      <woot-submit-button
-        class="default"
-        :button-text="buttonText"
-        :loading="isUpdating"
-        @click="onClick()"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    subTitle: {
-      type: String,
-      required: true,
-    },
-    buttonText: {
-      type: String,
-      default: '',
-    },
-    isUpdating: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    onClick() {
-      this.$emit('update');
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import '~dashboard/assets/scss/variables';
-
-.settings--form--header {
-  align-items: center;
-  border-bottom: 1px solid $color-border;
-  display: flex;
-  margin-bottom: $space-normal;
-  padding: $space-normal 0;
-
-  .button {
-    margin-bottom: 0;
-  }
-
-  .title {
-    margin-bottom: 0;
-    font-size: $font-size-default;
-  }
-}
-</style>
--- a/app/javascript/dashboard/components/SettingsSection.vue
+++ b/app/javascript/dashboard/components/SettingsSection.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="row settings--section">
+    <div class="medium-4">
+      <p class="sub-block-title">
+        {{ title }}
+      </p>
+      <p class="sub-head">
+        {{ subTitle }}
+      </p>
+    </div>
+    <div class="medium-6">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    subTitle: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '~dashboard/assets/scss/variables';
+
+.settings--section {
+  border-bottom: 1px solid $color-border;
+  display: flex;
+  padding: $space-normal 0;
+
+  .sub-block-title {
+    color: $color-woot;
+    font-weight: $font-weight-medium;
+    margin-bottom: 0;
+  }
+}
+</style>
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -30,6 +30,18 @@
          "LABEL": "Website Domain",
          "PLACEHOLDER": "Enter your website domain (eg: acme.com)"
        },
+        "CHANNEL_WELCOME_TITLE": {
+          "LABEL": "Welcome Heading",
+          "PLACEHOLDER": "Hi there !"
+        },
+        "CHANNEL_WELCOME_TAGLINE": {
+          "LABEL": "Welcome Tagline",
+          "PLACEHOLDER": "We make it simple to connect with us. Ask us anything, or share your feedback."
+        },
+        "CHANNEL_AGENT_AWAY_MESSAGE": {
+          "LABEL": "Agents Away Message",
+          "PLACEHOLDER": "Acme Inc typically replies in a few hours."
+        },
        "WIDGET_COLOR": {
          "LABEL": "Widget Color",
          "PLACEHOLDER": "Update the widget color used in widget"
@@ -102,7 +114,7 @@
    "VIEW": "View",
    "EDIT": {
      "API": {
-        "SUCCESS_MESSAGE": "Widget color updated successfully",
+        "SUCCESS_MESSAGE": "Inbox settings updated successfully",
        "AUTO_ASSIGNMENT_SUCCESS_MESSAGE": "Auto assignment updated successfully",
        "ERROR_MESSAGE": "Could not update widget color. Please try again later."
      },
@@ -132,7 +144,9 @@
      "INBOX_AGENTS_SUB_TEXT": "Add or remove agents from this inbox",
      "UPDATE": "Update",
      "AUTO_ASSIGNMENT": "Enable auto assignment",
-      "AUTO_ASSIGNMENT_SUB_TEXT": "Enable or disable the automatic assignment of available agents on new conversations"
+      "INBOX_UPDATE_TITLE": "Inbox Settings",
+      "INBOX_UPDATE_SUB_TEXT": "Update your inbox settings",
+      "AUTO_ASSIGNMENT_SUB_TEXT": "Enable or disable the automatic assignment of new conversations to the agents added to this inbox."
    }
  }
 }
--- a/app/javascript/dashboard/i18n/locale/en/signup.json
+++ b/app/javascript/dashboard/i18n/locale/en/signup.json
@@ -6,7 +6,7 @@
    "ACCOUNT_NAME": {
      "LABEL": "Account Name",
      "PLACEHOLDER": "Wayne Enterprises",
-      "ERROR": "Account Name is too small"
+      "ERROR": "Account Name is too short"
    },
    "EMAIL": {
      "LABEL": "Email",
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -4,79 +4,177 @@
      :header-image="inbox.avatarUrl"
      :header-title="inboxName"
    />
+
+    <div class="settings--content">
+      <settings-section
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_SUB_TEXT')"
+      >
+        <div v-if="inbox.channel_type === 'Channel::WebWidget'">
+          <div class="medium-12 columns">
+            <label>
+              {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_NAME.LABEL') }}
+              <input
+                v-model.trim="inboxName"
+                type="text"
+                :placeholder="
+                  $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
+                "
+              />
+            </label>
+          </div>
+          <div class="medium-12 columns">
+            <label>
+              {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL') }}
+              <input
+                v-model.trim="channelWebsiteUrl"
+                type="text"
+                :placeholder="
+                  $t(
+                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER'
+                  )
+                "
+              />
+            </label>
+          </div>
+          <div class="medium-12 columns">
+            <label>
+              {{
+                $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
+              }}
+              <input
+                v-model.trim="channelWelcomeTitle"
+                type="text"
+                :placeholder="
+                  $t(
+                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
+                  )
+                "
+              />
+            </label>
+          </div>
+          <div class="medium-12 columns">
+            <label>
+              {{
+                $t(
+                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL'
+                )
+              }}
+              <input
+                v-model.trim="channelWelcomeTagline"
+                type="text"
+                :placeholder="
+                  $t(
+                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
+                  )
+                "
+              />
+            </label>
+          </div>
+          <div class="medium-12 columns">
+            <label>
+              {{
+                $t(
+                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AGENT_AWAY_MESSAGE.LABEL'
+                )
+              }}
+              <input
+                v-model.trim="channelAgentAwayMessage"
+                type="text"
+                :placeholder="
+                  $t(
+                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AGENT_AWAY_MESSAGE.PLACEHOLDER'
+                  )
+                "
+              />
+            </label>
+          </div>
+
+          <div class="medium-12 columns">
+            <label>
+              {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
+              <compact
+                v-model="inbox.widget_color"
+                class="widget-color--selector"
+              />
+            </label>
+          </div>
+        </div>
+
+        <div>
+          <label>
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }}
+            <select v-model="autoAssignment">
+              <option value="true">
+                {{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.ENABLED') }}
+              </option>
+              <option value="false">
+                {{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.DISABLED') }}
+              </option>
+            </select>
+            <p class="help-text">
+              {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT') }}
+            </p>
+          </label>
+        </div>
+
+        <woot-submit-button
+          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+          :loading="uiFlags.isUpdatingInbox"
+          @click="updateInbox"
+        >
+        </woot-submit-button>
+      </settings-section>
+    </div>
+
+    <!-- update agents in inbox -->
+
+    <div class="settings--content">
+      <settings-section
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
+      >
+        <multiselect
+          v-model="selectedAgents"
+          :options="agentList"
+          track-by="id"
+          label="name"
+          :multiple="true"
+          :close-on-select="false"
+          :clear-on-select="false"
+          :hide-selected="true"
+          placeholder="Pick some"
+          @select="$v.selectedAgents.$touch"
+        />
+
+        <woot-submit-button
+          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+          :loading="isAgentListUpdating"
+          @click="updateAgents"
+        >
+        </woot-submit-button>
+      </settings-section>
+    </div>
    <div
      v-if="inbox.channel_type === 'Channel::FacebookPage'"
      class="settings--content"
    >
-      <settings-form-header
+      <settings-section
        :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
      >
-      </settings-form-header>
-      <woot-code :script="messengerScript"></woot-code>
+        <woot-code :script="messengerScript"></woot-code>
+      </settings-section>
    </div>
    <div v-else-if="inbox.channel_type === 'Channel::WebWidget'">
      <div class="settings--content">
-        <settings-form-header
+        <settings-section
          :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
          :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
        >
-        </settings-form-header>
-        <woot-code :script="inbox.web_widget_script"></woot-code>
+          <woot-code :script="inbox.web_widget_script"></woot-code>
+        </settings-section>
      </div>
-      <div class="settings--content">
-        <settings-form-header
-          :title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL')"
-          :sub-title="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.PLACEHOLDER')
-          "
-          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-          :is-updating="uiFlags.isUpdating"
-          @update="updateWidgetColor"
-        >
-        </settings-form-header>
-        <Compact v-model="inbox.widget_color" class="widget-color--selector" />
-      </div>
-    </div>
-    <div class="settings--content">
-      <settings-form-header
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
-        :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-        :is-updating="isAgentListUpdating"
-        @update="updateAgents"
-      >
-      </settings-form-header>
-      <multiselect
-        v-model="selectedAgents"
-        :options="agentList"
-        track-by="id"
-        label="name"
-        :multiple="true"
-        :close-on-select="false"
-        :clear-on-select="false"
-        :hide-selected="true"
-        placeholder="Pick some"
-        @select="$v.selectedAgents.$touch"
-      />
-    </div>
-    <div class="settings--content">
-      <settings-form-header
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT')"
-        :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-        :is-updating="uiFlags.isUpdatingAutoAssignment"
-        @update="updateAutoAssignment"
-      >
-      </settings-form-header>
-      <select v-model="autoAssignment">
-        <option value="true">
-          {{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.ENABLED') }}
-        </option>
-        <option value="false">
-          {{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.DISABLED') }}
-        </option>
-      </select>
    </div>
  </div>
 </template>
@@ -88,12 +186,12 @@ import { mapGetters } from 'vuex';
 import { createMessengerScript } from 'dashboard/helper/scriptGenerator';
 import { Compact } from 'vue-color';
 import configMixin from 'shared/mixins/configMixin';
-import SettingsFormHeader from '../../../../components/SettingsFormHeader.vue';
+import SettingsSection from '../../../../components/SettingsSection';

 export default {
  components: {
    Compact,
-    SettingsFormHeader,
+    SettingsSection,
  },
  mixins: [configMixin],
  data() {
@@ -102,6 +200,10 @@ export default {
      autoAssignment: false,
      isUpdating: false,
      isAgentListUpdating: false,
+      channelWebsiteUrl: '',
+      channelWelcomeTitle: '',
+      channelWelcomeTagline: '',
+      channelAgentAwayMessage: '',
    };
  },
  computed: {
@@ -145,6 +247,10 @@ export default {
      this.$store.dispatch('inboxes/get').then(() => {
        this.fetchAttachedAgents();
        this.autoAssignment = this.inbox.enable_auto_assignment;
+        this.channelWebsiteUrl = this.inbox.website_url;
+        this.channelWelcomeTitle = this.inbox.welcome_title;
+        this.channelWelcomeTagline = this.inbox.welcome_tagline;
+        this.channelAgentAwayMessage = this.inbox.agent_away_message;
      });
    },
    async fetchAttachedAgents() {
@@ -181,34 +287,23 @@ export default {
      }
      this.isAgentListUpdating = false;
    },
-    async updateWidgetColor() {
+    async updateInbox() {
      try {
-        await this.$store.dispatch('inboxes/updateWebsiteChannel', {
-          id: this.inbox.channel_id,
-          website: {
-            widget_color: this.getWidgetColor(this.inbox.widget_color),
-          },
-        });
-        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-      }
-    },
-    async updateAutoAssignment() {
-      try {
-        await this.$store.dispatch('inboxes/updateAutoAssignment', {
+        await this.$store.dispatch('inboxes/updateInbox', {
          id: this.currentInboxId,
-          inbox: {
-            enable_auto_assignment: this.autoAssignment,
+          name: this.inboxName,
+          enable_auto_assignment: this.autoAssignment,
+          channel: {
+            widget_color: this.getWidgetColor(this.inbox.widget_color),
+            website_url: this.channelWebsiteUrl,
+            welcome_title: this.channelWelcomeTitle,
+            welcome_tagline: this.channelWelcomeTagline,
+            agent_away_message: this.channelAgentAwayMessage,
          },
        });
-        this.showAlert(
-          this.$t('INBOX_MGMT.EDIT.API.AUTO_ASSIGNMENT_SUCCESS_MESSAGE')
-        );
+        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
      } catch (error) {
-        this.showAlert(
-          this.$t('INBOX_MGMT.EDIT.API.AUTO_ASSIGNMENT_SUCCESS_MESSAGE')
-        );
+        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
      }
    },
    getWidgetColor() {
@@ -226,3 +321,26 @@ export default {
  },
 };
 </script>
+
+<style scoped lang="scss">
+@import '~dashboard/assets/scss/variables';
+@import '~dashboard/assets/scss/mixins';
+
+.settings {
+  background: $color-white;
+
+  .settings--content {
+    &:last-child {
+      .settings--section {
+        border-bottom: 0;
+      }
+    }
+  }
+
+  .page-top-bar {
+    @include background-light;
+    @include border-normal-bottom;
+    padding: $space-normal $space-larger;
+  }
+}
+</style>
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
@@ -221,9 +221,8 @@ export default {
      return {
        user_access_token: this.user_access_token,
        page_access_token: this.selectedPage.access_token,
-        page_name: this.selectedPage.name,
        page_id: this.selectedPage.id,
-        inbox_name: this.pageName,
+        inbox_name: this.selectedPage.name,
      };
    },

--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
@@ -18,7 +18,7 @@
        <label>
          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_NAME.LABEL') }}
          <input
-            v-model.trim="websiteName"
+            v-model.trim="inboxName"
            type="text"
            :placeholder="
              $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
@@ -30,7 +30,7 @@
        <label>
          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL') }}
          <input
-            v-model.trim="websiteUrl"
+            v-model.trim="channelWebsiteUrl"
            type="text"
            :placeholder="
              $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
@@ -38,11 +38,62 @@
          />
        </label>
      </div>
+      <div class="medium-12 columns">
+        <label>
+          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL') }}
+          <input
+            v-model.trim="channelWelcomeTitle"
+            type="text"
+            :placeholder="
+              $t(
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
+              )
+            "
+          />
+        </label>
+      </div>
+      <div class="medium-12 columns">
+        <label>
+          {{
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
+          }}
+          <input
+            v-model.trim="channelWelcomeTagline"
+            type="text"
+            :placeholder="
+              $t(
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
+              )
+            "
+          />
+        </label>
+      </div>
+      <div class="medium-12 columns">
+        <label>
+          {{
+            $t(
+              'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AGENT_AWAY_MESSAGE.LABEL'
+            )
+          }}
+          <input
+            v-model.trim="channelAgentAwayMessage"
+            type="text"
+            :placeholder="
+              $t(
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AGENT_AWAY_MESSAGE.PLACEHOLDER'
+              )
+            "
+          />
+        </label>
+      </div>

      <div class="medium-12 columns">
        <label>
          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
-          <compact v-model="widgetColor" class="widget-color--selector" />
+          <compact
+            v-model="channelWidgetColor"
+            class="widget-color--selector"
+          />
        </label>
      </div>

@@ -50,7 +101,7 @@
        <div class="medium-12 columns">
          <woot-submit-button
            :loading="uiFlags.isCreating"
-            :disabled="!websiteUrl || !websiteName"
+            :disabled="!channelWebsiteUrl || !inboxName"
            :button-text="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.SUBMIT_BUTTON')"
          />
        </div>
@@ -72,9 +123,12 @@ export default {
  },
  data() {
    return {
-      websiteName: '',
-      websiteUrl: '',
-      widgetColor: { hex: '#009CE0' },
+      inboxName: '',
+      channelWebsiteUrl: '',
+      channelWidgetColor: { hex: '#009CE0' },
+      channelWelcomeTitle: '',
+      channelWelcomeTagline: '',
+      channelAgentAwayMessage: '',
    };
  },
  computed: {
@@ -87,10 +141,14 @@ export default {
      const website = await this.$store.dispatch(
        'inboxes/createWebsiteChannel',
        {
-          website: {
-            website_name: this.websiteName,
-            website_url: this.websiteUrl,
-            widget_color: this.widgetColor.hex,
+          name: this.inboxName,
+          channel: {
+            type: 'web_widget',
+            website_url: this.channelWebsiteUrl,
+            widget_color: this.channelWidgetColor.hex,
+            welcome_title: this.channelWelcomeTitle,
+            welcome_tagline: this.channelWelcomeTagline,
+            agent_away_message: this.channelAgentAwayMessage,
          },
        }
      );
--- a/app/javascript/dashboard/store/modules/inboxes.js
+++ b/app/javascript/dashboard/store/modules/inboxes.js
@@ -79,18 +79,7 @@ export const actions = {
      throw new Error(error);
    }
  },
-  updateWebsiteChannel: async ({ commit }, { id, ...inboxParams }) => {
-    commit(types.default.SET_INBOXES_UI_FLAG, { isUpdating: true });
-    try {
-      const response = await WebChannel.update(id, inboxParams);
-      commit(types.default.EDIT_INBOXES, response.data);
-      commit(types.default.SET_INBOXES_UI_FLAG, { isUpdating: false });
-    } catch (error) {
-      commit(types.default.SET_INBOXES_UI_FLAG, { isUpdating: false });
-      throw new Error(error);
-    }
-  },
-  updateAutoAssignment: async ({ commit }, { id, ...inboxParams }) => {
+  updateInbox: async ({ commit }, { id, ...inboxParams }) => {
    commit(types.default.SET_INBOXES_UI_FLAG, {
      isUpdatingAutoAssignment: true,
    });
--- a/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js
@@ -70,35 +70,13 @@ describe('#actions', () => {
    });
  });

-  describe('#updateWebsiteChannel', () => {
-    it('sends correct actions if API is success', async () => {
-      axios.patch.mockResolvedValue({ data: inboxList[0] });
-      await actions.updateWebsiteChannel({ commit }, inboxList[0]);
-      expect(commit.mock.calls).toEqual([
-        [types.default.SET_INBOXES_UI_FLAG, { isUpdating: true }],
-        [types.default.EDIT_INBOXES, inboxList[0]],
-        [types.default.SET_INBOXES_UI_FLAG, { isUpdating: false }],
-      ]);
-    });
-    it('sends correct actions if API is error', async () => {
-      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
-      await expect(
-        actions.updateWebsiteChannel({ commit }, inboxList[0])
-      ).rejects.toThrow(Error);
-      expect(commit.mock.calls).toEqual([
-        [types.default.SET_INBOXES_UI_FLAG, { isUpdating: true }],
-        [types.default.SET_INBOXES_UI_FLAG, { isUpdating: false }],
-      ]);
-    });
-  });
-
-  describe('#updateAutoAssignment', () => {
+  describe('#updateInbox', () => {
    it('sends correct actions if API is success', async () => {
      const updatedInbox = inboxList[0];
      updatedInbox.enable_auto_assignment = false;

      axios.patch.mockResolvedValue({ data: updatedInbox });
-      await actions.updateAutoAssignment(
+      await actions.updateInbox(
        { commit },
        { id: updatedInbox.id, inbox: { enable_auto_assignment: false } }
      );
@@ -114,7 +92,7 @@ describe('#actions', () => {
    it('sends correct actions if API is error', async () => {
      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
      await expect(
-        actions.updateAutoAssignment(
+        actions.updateInbox(
          { commit },
          { id: inboxList[0].id, inbox: { enable_auto_assignment: false } }
        )
--- a/app/javascript/sdk/IFrameHelper.js
+++ b/app/javascript/sdk/IFrameHelper.js
@@ -93,7 +93,7 @@ export const IFrameHelper = {
      }
    },
  },
-  onLoad: ({ widget_color: widgetColor }) => {
+  onLoad: ({ widgetColor }) => {
    const iframe = IFrameHelper.getAppFrame();
    iframe.style.visibility = '';
    iframe.setAttribute('id', `chatwoot_live_chat_widget`);
--- a/app/javascript/widget/App.vue
+++ b/app/javascript/widget/App.vue
@@ -17,7 +17,7 @@ export default {
    };
  },
  mounted() {
-    const { website_token: websiteToken = '' } = window.chatwootWebChannel;
+    const { websiteToken } = window.chatwootWebChannel;
    if (IFrameHelper.isIFrame()) {
      IFrameHelper.sendMessage({
        event: 'loaded',
--- a/app/javascript/widget/components/ChatHeaderExpanded.vue
+++ b/app/javascript/widget/components/ChatHeaderExpanded.vue
@@ -20,11 +20,6 @@ import { IFrameHelper } from 'widget/helpers/utils';

 export default {
  name: 'ChatHeaderExpanded',
-  computed: {
-    ...mapGetters({
-      widgetColor: 'appConfig/getWidgetColor',
-    }),
-  },
  props: {
    introHeading: {
      type: String,
@@ -36,6 +31,11 @@ export default {
        'We make it simple to connect with us. Ask us anything, or share your feedback.',
    },
  },
+  computed: {
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
+  },
  methods: {
    closeWindow() {
      if (IFrameHelper.isIFrame()) {
--- a/app/javascript/widget/store/modules/appConfig.js
+++ b/app/javascript/widget/store/modules/appConfig.js
@@ -16,7 +16,7 @@ const actions = {

 const mutations = {
  [SET_WIDGET_COLOR]($state, data) {
-    $state.widgetColor = data.widget_color;
+    $state.widgetColor = data.widgetColor;
  },
 };

--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -1,8 +1,12 @@
 <template>
  <div class="home">
    <div class="header-wrap">
-      <ChatHeaderExpanded v-if="isHeaderExpanded" />
-      <ChatHeader v-else :title="getHeaderName" />
+      <ChatHeaderExpanded
+        v-if="isHeaderExpanded"
+        :intro-heading="channelConfig.welcomeTitle"
+        :intro-body="channelConfig.welcomeTagline"
+      />
+      <ChatHeader v-else :title="channelConfig.websiteName" />
    </div>
    <AvailableAgents v-if="showAvailableAgents" :agents="availableAgents" />
    <ConversationWrap :grouped-messages="groupedMessages" />
@@ -45,8 +49,8 @@ export default {
    isHeaderExpanded() {
      return this.conversationSize === 0;
    },
-    getHeaderName() {
-      return window.chatwootWebChannel.website_name;
+    channelConfig() {
+      return window.chatwootWebChannel;
    },
    showAvailableAgents() {
      return this.availableAgents.length > 0 && this.conversationSize < 1;