From f819bc0f33e31bf248c16eef89c2751d08637e91 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranavrajs@gmail.com>
Date: Tue, 12 May 2020 01:31:40 +0530
Subject: [PATCH] Chore: Use installation config in frontend (#847)

* Use installation config in widget
* Add configuration for installation in UI
* Add config for mailer

Co-authored-by: Sojan <sojan@pepalo.com>
---
 .../dashboard/components/layout/Sidebar.vue   |  9 ++---
 .../dashboard/components/ui/Wizard.vue        | 11 ++++---
 .../dashboard/routes/auth/Signup.vue          | 31 +++++++++++++----
 .../dashboard/settings/agents/Index.vue       | 13 ++++++--
 .../settings/inbox/InboxChannels.vue          | 29 +++++++++++++++-
 .../routes/dashboard/settings/inbox/Index.vue | 13 ++++++--
 .../settings/inbox/channels/Facebook.vue      | 20 +++++++++--
 .../dashboard/settings/integrations/Index.vue | 13 +++++---
 .../settings/integrations/Webhook.vue         | 12 ++++++-
 .../dashboard/routes/login/Login.vue          | 19 +++++++----
 app/javascript/dashboard/store/index.js       |  6 ++--
 .../shared/mixins/globalConfigMixin.js        |  7 ++++
 app/javascript/shared/store/globalConfig.js   | 33 +++++++++++++++++++
 app/javascript/widget/components/Branding.vue | 25 ++++++++++++--
 app/javascript/widget/store/index.js          |  2 ++
 app/mailers/application_mailer.rb             |  5 +++
 app/views/layouts/mailer.html.erb             |  6 ++--
 app/views/layouts/vueapp.html.erb             | 15 +++++----
 app/views/widgets/show.html.erb               |  1 +
 config/installation_config.yml                | 16 +++++++--
 public/brand-assets/logo.svg                  | 15 +++++++++
 public/brand-assets/logo_thumbnail.svg        | 12 +++++++
 22 files changed, 264 insertions(+), 49 deletions(-)
 create mode 100644 app/javascript/shared/mixins/globalConfigMixin.js
 create mode 100644 app/javascript/shared/store/globalConfig.js
 create mode 100644 public/brand-assets/logo.svg
 create mode 100644 public/brand-assets/logo_thumbnail.svg

diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index dfb9081d2..a38ebe2cf 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -2,7 +2,7 @@
   <aside class="sidebar animated shrink columns">
     <div class="logo">
       <router-link :to="dashboardPath" replace>
-        <img src="~dashboard/assets/images/woot-logo.svg" alt="Woot-logo" />
+        <img :src="globalConfig.logo" :alt="globalConfig.installationName" />
       </router-link>
     </div>
 
@@ -104,10 +104,11 @@ export default {
   },
   computed: {
     ...mapGetters({
-      daysLeft: 'getTrialLeft',
-      subscriptionData: 'getSubscription',
-      inboxes: 'inboxes/getInboxes',
       currentUser: 'getCurrentUser',
+      daysLeft: 'getTrialLeft',
+      globalConfig: 'globalConfig/get',
+      inboxes: 'inboxes/getInboxes',
+      subscriptionData: 'getSubscription',
     }),
     accessibleMenuItems() {
       // get all keys in menuGroup
diff --git a/app/javascript/dashboard/components/ui/Wizard.vue b/app/javascript/dashboard/components/ui/Wizard.vue
index f34b8f182..71848ecb0 100644
--- a/app/javascript/dashboard/components/ui/Wizard.vue
+++ b/app/javascript/dashboard/components/ui/Wizard.vue
@@ -27,11 +27,17 @@
 
 <script>
 /* eslint no-console: 0 */
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+
 export default {
+  mixins: [globalConfigMixin],
   props: {
     isFullwidth: Boolean,
+    items: {
+      type: Array,
+      default: () => [],
+    },
   },
-
   computed: {
     classObject() {
       return 'full-width';
@@ -39,9 +45,6 @@ export default {
     activeIndex() {
       return this.items.findIndex(i => i.route === this.$route.name);
     },
-    items() {
-      return this.$t('INBOX_MGMT.CREATE_FLOW');
-    },
   },
   methods: {
     isActive(item) {
diff --git a/app/javascript/dashboard/routes/auth/Signup.vue b/app/javascript/dashboard/routes/auth/Signup.vue
index b6d3d3a39..8e7047e5a 100644
--- a/app/javascript/dashboard/routes/auth/Signup.vue
+++ b/app/javascript/dashboard/routes/auth/Signup.vue
@@ -2,8 +2,8 @@
   <div class="medium-10 column signup">
     <div class="text-center medium-12 signup--hero">
       <img
-        src="~dashboard/assets/images/woot-logo.svg"
-        alt="Woot-logo"
+        :src="globalConfig.logo"
+        :alt="globalConfig.installationName"
         class="hero--logo"
       />
       <h2 class="hero--title">
@@ -58,13 +58,18 @@
               button-class="large expanded"
             >
             </woot-submit-button>
-            <p class="accept--terms" v-html="$t('REGISTER.TERMS_ACCEPT')"></p>
+            <p class="accept--terms" v-html="termsLink"></p>
           </div>
         </form>
         <div class="column text-center sigin--footer">
           <span>Already have an account?</span>
           <router-link to="/app/login">
-            {{ $t('LOGIN.TITLE') }}
+            {{
+              useInstallationName(
+                $t('LOGIN.TITLE'),
+                globalConfig.installationName
+              )
+            }}
           </router-link>
         </div>
       </div>
@@ -77,12 +82,13 @@
 
 import { required, minLength, email } from 'vuelidate/lib/validators';
 import Auth from '../../api/auth';
+import { mapGetters } from 'vuex';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 
 export default {
+  mixins: [globalConfigMixin],
   data() {
     return {
-      // We need to initialize the component with any
-      // properties that will be used in it
       credentials: {
         name: '',
         email: '',
@@ -106,6 +112,19 @@ export default {
       },
     },
   },
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+    }),
+    termsLink() {
+      return this.$t('REGISTER.TERMS_ACCEPT')
+        .replace('https://www.chatwoot.com/terms', this.globalConfig.termsURL)
+        .replace(
+          'https://www.chatwoot.com/privacy-policy',
+          this.globalConfig.privacyURL
+        );
+    },
+  },
   methods: {
     showAlert(message) {
       // Reset loading, current selected agent
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index 06e4685bf..fef504ec7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -74,7 +74,14 @@
         </div>
       </div>
       <div class="small-4 columns">
-        <span v-html="$t('AGENT_MGMT.SIDEBAR_TXT')"></span>
+        <span
+          v-html="
+            useInstallationName(
+              $t('AGENT_MGMT.SIDEBAR_TXT'),
+              globalConfig.installationName
+            )
+          "
+        />
       </div>
     </div>
     <!-- Add Agent -->
@@ -108,8 +115,8 @@
 /* global bus */
 
 import { mapGetters } from 'vuex';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import Thumbnail from '../../../../components/widgets/Thumbnail';
-
 import AddAgent from './AddAgent';
 import EditAgent from './EditAgent';
 import DeleteAgent from './DeleteAgent';
@@ -121,6 +128,7 @@ export default {
     DeleteAgent,
     Thumbnail,
   },
+  mixins: [globalConfigMixin],
   data() {
     return {
       loading: {},
@@ -138,6 +146,7 @@ export default {
       agentList: 'agents/getAgents',
       uiFlags: 'agents/getUIFlags',
       currentUserId: 'getCurrentUserID',
+      globalConfig: 'globalConfig/get',
     }),
     deleteConfirmText() {
       return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.YES')} ${
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
index 27dfe2c24..ddc6f6e20 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
@@ -1,6 +1,33 @@
 <template>
   <div class="row content-box full-height">
-    <woot-wizard class="small-3 columns"></woot-wizard>
+    <woot-wizard
+      class="small-3 columns"
+      :global-config="globalConfig"
+      :items="items"
+    />
     <router-view></router-view>
   </div>
 </template>
+
+<script>
+import { mapGetters } from 'vuex';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+
+export default {
+  mixins: [globalConfigMixin],
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+    }),
+    items() {
+      return this.$t('INBOX_MGMT.CREATE_FLOW').map(item => ({
+        ...item,
+        body: this.useInstallationName(
+          item.body,
+          this.globalConfig.installationName
+        ),
+      }));
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index 1d4ab689b..414c246ab 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -77,7 +77,14 @@
       </div>
 
       <div class="small-4 columns">
-        <span v-html="$t('INBOX_MGMT.SIDEBAR_TXT')"></span>
+        <span
+          v-html="
+            useInstallationName(
+              $t('INBOX_MGMT.SIDEBAR_TXT'),
+              globalConfig.installationName
+            )
+          "
+        />
       </div>
     </div>
     <settings
@@ -107,13 +114,14 @@ import DeleteInbox from './DeleteInbox';
 import adminMixin from '../../../../mixins/isAdmin';
 import auth from '../../../../api/auth';
 import accountMixin from '../../../../mixins/account';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 
 export default {
   components: {
     Settings,
     DeleteInbox,
   },
-  mixins: [adminMixin, accountMixin],
+  mixins: [adminMixin, accountMixin, globalConfigMixin],
   data() {
     return {
       loading: {},
@@ -125,6 +133,7 @@ export default {
   computed: {
     ...mapGetters({
       inboxesList: 'inboxes/getInboxes',
+      globalConfig: 'globalConfig/get',
     }),
     // Delete Modal
     deleteConfirmText() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
index 07cdfa0f9..25634d026 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
@@ -7,7 +7,14 @@
           alt="Facebook-logo"
         />
       </a>
-      <p>{{ $t('INBOX_MGMT.ADD.FB.HELP') }}</p>
+      <p>
+        {{
+          useInstallationName(
+            $t('INBOX_MGMT.ADD.FB.HELP'),
+            globalConfig.installationName
+          )
+        }}
+      </p>
     </div>
     <div v-else>
       <loading-state
@@ -18,7 +25,12 @@
         <div class="medium-12 columns">
           <page-header
             :header-title="$t('INBOX_MGMT.ADD.DETAILS.TITLE')"
-            :header-content="$t('INBOX_MGMT.ADD.DETAILS.DESC')"
+            :header-content="
+              useInstallationName(
+                $t('INBOX_MGMT.ADD.DETAILS.DESC'),
+                globalConfig.installationName
+              )
+            "
           />
         </div>
         <div class="medium-7 columns">
@@ -72,13 +84,14 @@ import { mapGetters } from 'vuex';
 import ChannelApi from '../../../../../api/channels';
 import PageHeader from '../../SettingsSubPageHeader';
 import router from '../../../../index';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 
 export default {
   components: {
     LoadingState,
     PageHeader,
   },
-
+  mixins: [globalConfigMixin],
   data() {
     return {
       isCreating: false,
@@ -114,6 +127,7 @@ export default {
     },
     ...mapGetters({
       currentUser: 'getCurrentUser',
+      globalConfig: 'globalConfig/get',
     }),
     accountId() {
       return this.currentUser.account_id;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
index 4ebad6b2d..7eb506273 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
@@ -13,7 +13,12 @@
                   {{ $t('INTEGRATION_SETTINGS.WEBHOOK.TITLE') }}
                 </h3>
                 <p class="integration--description">
-                  {{ $t('INTEGRATION_SETTINGS.WEBHOOK.INTEGRATION_TXT') }}
+                  {{
+                    useInstallationName(
+                      $t('INTEGRATION_SETTINGS.WEBHOOK.INTEGRATION_TXT'),
+                      globalConfig.installationName
+                    )
+                  }}
                 </p>
               </div>
               <div class="small-2 column button-wrap">
@@ -33,20 +38,20 @@
           </div>
         </div>
       </div>
-      <!-- <div class="small-4 columns help-wrap">
-        <span v-html="$t('INTEGRATION_SETTINGS.SIDEBAR_TXT')"></span>
-      </div> -->
     </div>
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
 import { frontendURL } from '../../../../helper/URLHelper';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 
 export default {
+  mixins: [globalConfigMixin],
   computed: {
     ...mapGetters({
       currentUser: 'getCurrentUser',
+      globalConfig: 'globalConfig/get',
     }),
     accountId() {
       return this.currentUser.account_id;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
index 8bdc7de9e..c16766df7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
@@ -55,7 +55,14 @@
       </div>
 
       <div class="small-4 columns">
-        <span v-html="$t('INTEGRATION_SETTINGS.WEBHOOK.SIDEBAR_TXT')"></span>
+        <span
+          v-html="
+            useInstallationName(
+              $t('INTEGRATION_SETTINGS.WEBHOOK.SIDEBAR_TXT'),
+              globalConfig.installationName
+            )
+          "
+        />
       </div>
     </div>
 
@@ -79,12 +86,14 @@
 import { mapGetters } from 'vuex';
 import NewWebhook from './New';
 import DeleteWebhook from './Delete';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 
 export default {
   components: {
     NewWebhook,
     DeleteWebhook,
   },
+  mixins: [globalConfigMixin],
   data() {
     return {
       loading: {},
@@ -97,6 +106,7 @@ export default {
     ...mapGetters({
       records: 'webhooks/getWebhooks',
       uiFlags: 'webhooks/getUIFlags',
+      globalConfig: 'globalConfig/get',
     }),
   },
   mounted() {
diff --git a/app/javascript/dashboard/routes/login/Login.vue b/app/javascript/dashboard/routes/login/Login.vue
index 9d54a2315..f8729bc49 100644
--- a/app/javascript/dashboard/routes/login/Login.vue
+++ b/app/javascript/dashboard/routes/login/Login.vue
@@ -2,19 +2,20 @@
   <div class="medium-12 column login">
     <div class="text-center medium-12 login__hero align-self-top">
       <img
-        src="~dashboard/assets/images/woot-logo.svg"
-        alt="Woot-logo"
+        :src="globalConfig.logo"
+        :alt="globalConfig.installationName"
         class="hero__logo"
       />
       <h2 class="hero__title">
-        {{ $t('LOGIN.TITLE') }}
+        {{
+          useInstallationName($t('LOGIN.TITLE'), globalConfig.installationName)
+        }}
       </h2>
     </div>
     <div class="row align-center">
       <div class="small-12 medium-4 column">
         <form class="login-box column align-self-top" @submit.prevent="login()">
           <div class="column log-in-form">
-            <!-- <h4 class="text-center">{{$t('LOGIN.TITLE')}}</h4> -->
             <label :class="{ error: $v.credentials.email.$error }">
               {{ $t('LOGIN.EMAIL.LABEL') }}
               <input
@@ -68,14 +69,15 @@
 /* global bus */
 
 import { required, email } from 'vuelidate/lib/validators';
-
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import WootSubmitButton from '../../components/buttons/FormSubmitButton';
-// import router from '../../routes';
+import { mapGetters } from 'vuex';
 
 export default {
   components: {
     WootSubmitButton,
   },
+  mixins: [globalConfigMixin],
   data() {
     return {
       // We need to initialize the component with any
@@ -102,6 +104,11 @@ export default {
       },
     },
   },
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+    }),
+  },
   methods: {
     showAlert(message) {
       // Reset loading, current selected agent
diff --git a/app/javascript/dashboard/store/index.js b/app/javascript/dashboard/store/index.js
index 68f4a7372..f88139003 100755
--- a/app/javascript/dashboard/store/index.js
+++ b/app/javascript/dashboard/store/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 
+import accounts from './modules/accounts';
 import agents from './modules/agents';
 import auth from './modules/auth';
 import billing from './modules/billing';
@@ -10,15 +11,15 @@ import contactConversations from './modules/contactConversations';
 import contacts from './modules/contacts';
 import conversationLabels from './modules/conversationLabels';
 import conversationMetadata from './modules/conversationMetadata';
-import conversationTypingStatus from './modules/conversationTypingStatus';
 import conversationPage from './modules/conversationPage';
 import conversations from './modules/conversations';
+import conversationTypingStatus from './modules/conversationTypingStatus';
+import globalConfig from 'shared/store/globalConfig';
 import inboxes from './modules/inboxes';
 import inboxMembers from './modules/inboxMembers';
 import reports from './modules/reports';
 import userNotificationSettings from './modules/userNotificationSettings';
 import webhooks from './modules/webhooks';
-import accounts from './modules/accounts';
 
 Vue.use(Vuex);
 export default new Vuex.Store({
@@ -36,6 +37,7 @@ export default new Vuex.Store({
     conversationPage,
     conversations,
     conversationTypingStatus,
+    globalConfig,
     inboxes,
     inboxMembers,
     reports,
diff --git a/app/javascript/shared/mixins/globalConfigMixin.js b/app/javascript/shared/mixins/globalConfigMixin.js
new file mode 100644
index 000000000..8d34eac1c
--- /dev/null
+++ b/app/javascript/shared/mixins/globalConfigMixin.js
@@ -0,0 +1,7 @@
+export default {
+  methods: {
+    useInstallationName(str = '', installationName) {
+      return str.replace(/Chatwoot/g, installationName);
+    },
+  },
+};
diff --git a/app/javascript/shared/store/globalConfig.js b/app/javascript/shared/store/globalConfig.js
new file mode 100644
index 000000000..547bb7dfc
--- /dev/null
+++ b/app/javascript/shared/store/globalConfig.js
@@ -0,0 +1,33 @@
+const {
+  LOGO_THUMBNAIL: logoThumbnail,
+  LOGO: logo,
+  INSTALLATION_NAME: installationName,
+  WIDGET_BRAND_URL: widgetBrandURL,
+  TERMS_URL: termsURL,
+  PRIVACY_URL: privacyURL,
+} = window.globalConfig;
+
+const state = {
+  logoThumbnail,
+  logo,
+  installationName,
+  widgetBrandURL,
+  termsURL,
+  privacyURL,
+};
+
+export const getters = {
+  get: $state => $state,
+};
+
+export const actions = {};
+
+export const mutations = {};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};
diff --git a/app/javascript/widget/components/Branding.vue b/app/javascript/widget/components/Branding.vue
index f1c79e62e..4c6c787bf 100644
--- a/app/javascript/widget/components/Branding.vue
+++ b/app/javascript/widget/components/Branding.vue
@@ -1,15 +1,34 @@
 <template>
   <a
     class="branding"
-    href="https://www.chatwoot.com?utm_source=widget_branding"
+    :href="`${globalConfig.widgetBrandURL}?utm_source=widget_branding`"
     rel="noreferrer noopener nofollow"
     target="_blank"
   >
-    <img src="~widget/assets/images/logo.svg" alt="ChatwootLogo" />
-    <span>{{ $t('POWERED_BY') }}</span>
+    <img
+      :alt="globalConfig.installationName"
+      :src="globalConfig.logoThumbnail"
+    />
+    <span>
+      {{ useInstallationName($t('POWERED_BY'), globalConfig.installationName) }}
+    </span>
   </a>
 </template>
 
+<script>
+import { mapGetters } from 'vuex';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+
+export default {
+  mixins: [globalConfigMixin],
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+    }),
+  },
+};
+</script>
+
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
diff --git a/app/javascript/widget/store/index.js b/app/javascript/widget/store/index.js
index f63642533..cf844fd3e 100755
--- a/app/javascript/widget/store/index.js
+++ b/app/javascript/widget/store/index.js
@@ -7,6 +7,7 @@ import conversation from 'widget/store/modules/conversation';
 import conversationAttributes from 'widget/store/modules/conversationAttributes';
 import conversationLabels from 'widget/store/modules/conversationLabels';
 import events from 'widget/store/modules/events';
+import globalConfig from 'shared/store/globalConfig';
 import message from 'widget/store/modules/message';
 
 Vue.use(Vuex);
@@ -20,6 +21,7 @@ export default new Vuex.Store({
     conversationAttributes,
     conversationLabels,
     events,
+    globalConfig,
     message,
   },
 });
diff --git a/app/mailers/application_mailer.rb b/app/mailers/application_mailer.rb
index e83bbf437..eee412690 100644
--- a/app/mailers/application_mailer.rb
+++ b/app/mailers/application_mailer.rb
@@ -5,6 +5,11 @@ class ApplicationMailer < ActionMailer::Base
 
   # helpers
   helper :frontend_urls
+  helper do
+    def global_config
+      @global_config ||= GlobalConfig.get('INSTALLATION_NAME', 'BRAND_URL')
+    end
+  end
 
   def smtp_config_set_or_development?
     ENV.fetch('SMTP_ADDRESS', nil).present? || Rails.env.development?
diff --git a/app/views/layouts/mailer.html.erb b/app/views/layouts/mailer.html.erb
index 208ef929c..f94e076e6 100644
--- a/app/views/layouts/mailer.html.erb
+++ b/app/views/layouts/mailer.html.erb
@@ -85,8 +85,8 @@
 
                                     <tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
                                         <td class="content-block" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
-                                            &mdash; Team Chatwoot <br/>
-                                            <a href="https://www.chatwoot.com" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 12px; vertical-align: top; color: #999; text-align: center; margin: 0; padding: 0 0 20px;" align="center" valign="top">https://www.chatwoot.com</a>
+                                            &mdash; Team <%= global_config['INSTALLATION_NAME'] %> <br/>
+                                            <a href="<%= global_config['BRAND_URL'] %>" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 12px; vertical-align: top; color: #999; text-align: center; margin: 0; padding: 0 0 20px;" align="center" valign="top"><%= global_config['BRAND_URL'] %></a>
                                         </td>
                                     </tr>
                                 </table>
@@ -96,9 +96,11 @@
                     <div class="footer" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; clear: both; color: #999; margin: 0; padding: 20px;">
                         <table width="100%" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
                             <tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
+                                <% if global_config['INSTALLATION_NAME'] == 'Chatwoot' %>
                                 <td class="aligncenter content-block" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 12px; vertical-align: top; color: #999; text-align: center; margin: 0; padding: 0 0 20px;" align="center" valign="top">
                                   Follow <a href="http://twitter.com/chatwootapp" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 12px; color: #999; text-decoration: underline; margin: 0;">@chatwootapp</a> on Twitter.
                                 </td>
+                                <% end %>
                             </tr>
                         </table>
                     </div>
diff --git a/app/views/layouts/vueapp.html.erb b/app/views/layouts/vueapp.html.erb
index f1f453bf2..e5d751a21 100644
--- a/app/views/layouts/vueapp.html.erb
+++ b/app/views/layouts/vueapp.html.erb
@@ -22,13 +22,6 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="manifest" href="/manifest.json">
     <%= csrf_meta_tags %>
-    <%= javascript_pack_tag 'application' %>
-    <%= stylesheet_pack_tag 'application' %>
-  </head>
-  <body>
-    <div id="app"></div>
-    <noscript id="noscript">This app works best with JavaScript enabled.</noscript>
-    <%= yield %>
     <script>
       window.chatwootConfig = {
         hostURL: '<%= ENV.fetch('FRONTEND_URL', '') %>',
@@ -40,6 +33,14 @@
         <% end %>
         enabledLanguages: <%= available_locales_with_name.to_json.html_safe %>
       }
+      window.globalConfig = <%= raw GlobalConfig.get('LOGO', 'INSTALLATION_NAME', 'WIDGET_BRAND_URL', 'TERMS_URL', 'PRIVACY_URL').to_json %>
     </script>
+    <%= javascript_pack_tag 'application' %>
+    <%= stylesheet_pack_tag 'application' %>
+  </head>
+  <body>
+    <div id="app"></div>
+    <noscript id="noscript">This app works best with JavaScript enabled.</noscript>
+    <%= yield %>
   </body>
 </html>
diff --git a/app/views/widgets/show.html.erb b/app/views/widgets/show.html.erb
index 7602074d7..632064bb0 100644
--- a/app/views/widgets/show.html.erb
+++ b/app/views/widgets/show.html.erb
@@ -23,6 +23,7 @@
       }
       window.chatwootPubsubToken = '<%= @contact.pubsub_token %>'
       window.authToken = '<%= @token %>'
+      window.globalConfig = <%= raw GlobalConfig.get('LOGO_THUMBNAIL', 'INSTALLATION_NAME', 'WIDGET_BRAND_URL').to_json %>
     </script>
     <%= javascript_pack_tag 'widget' %>
     <%= stylesheet_pack_tag 'widget' %>
diff --git a/config/installation_config.yml b/config/installation_config.yml
index 396fe21a8..ac340c168 100644
--- a/config/installation_config.yml
+++ b/config/installation_config.yml
@@ -1,2 +1,14 @@
-- name: SHOW_WIDGET_HEADER
-  value: true
+- name: LOGO_THUMBNAIL
+  value: '/brand-assets/logo_thumbnail.svg'
+- name: LOGO
+  value: '/brand-assets/logo.svg'
+- name: INSTALLATION_NAME
+  value: 'Chatwoot'
+- name: BRAND_URL
+  value: 'https://www.chatwoot.com'
+- name: WIDGET_BRAND_URL
+  value: 'https://www.chatwoot.com'
+- name: TERMS_URL
+  value: 'https://www.chatwoot.com/terms-of-service'
+- name: PRIVACY_URL
+  value: 'https://www.chatwoot.com/privacy-policy'
diff --git a/public/brand-assets/logo.svg b/public/brand-assets/logo.svg
new file mode 100644
index 000000000..438f2b4b0
--- /dev/null
+++ b/public/brand-assets/logo.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="2458px" height="512px" viewBox="0 0 2458 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
+    <title>on_white</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="on_white" fill-rule="nonzero">
+            <g id="woot-log">
+                <circle id="Oval" fill="#47A7F6" cx="256" cy="256" r="256"></circle>
+                <path d="M362.807947,368.807947 L244.122956,368.807947 C178.699407,368.807947 125.456954,315.561812 125.456954,250.12177 C125.456954,184.703089 178.699407,131.456954 244.124143,131.456954 C309.565494,131.456954 362.807947,184.703089 362.807947,250.12177 L362.807947,368.807947 Z" id="Fill-1" stroke="#FFFFFF" stroke-width="6" fill="#FFFFFF"></path>
+            </g>
+            <path d="M772.982159,256.84801 C768.65756,250.216959 762.170758,244.66714 753.52156,240.198388 C744.872362,235.729635 735.64669,233.495293 725.844265,233.495293 C715.176921,233.495293 705.735022,235.513409 697.518283,239.549701 C689.301545,243.585993 682.310215,248.991661 676.544083,255.766866 C670.777951,262.542071 666.381342,270.398308 663.354122,279.335813 C660.326903,288.273317 658.813316,297.643141 658.813316,307.445566 C658.813316,317.24799 660.326903,326.617814 663.354122,335.555319 C666.381342,344.492823 670.777951,352.34906 676.544083,359.124265 C682.310215,365.89947 689.373621,371.305138 697.734512,375.34143 C706.095404,379.377723 715.609379,381.395839 726.276723,381.395839 C736.655761,381.395839 746.09766,379.377723 754.602705,375.34143 C763.10775,371.305138 770.09908,365.827395 775.576905,358.908036 L802.821743,383.558127 C794.172545,393.648858 783.361209,401.505095 770.387412,407.127074 C757.413615,412.749053 742.710199,415.56 726.276723,415.56 C710.41986,415.56 695.78852,412.96528 682.382263,407.775761 C668.976006,402.586242 657.371839,395.306609 647.569415,385.936645 C637.76699,376.566681 630.054905,365.250816 624.432926,351.988713 C618.810947,338.726609 616,323.879042 616,307.445566 C616,291.300396 618.738872,276.59698 624.216697,263.334876 C629.694522,250.072773 637.334533,238.684833 647.136957,229.170715 C656.939381,219.656597 668.543548,212.304889 681.949805,207.115371 C695.356062,201.925852 709.843251,199.331131 725.411808,199.331131 C739.827138,199.331131 754.170176,202.214154 768.441352,207.980286 C782.712529,213.746418 794.028393,222.107184 802.389285,233.062835 L772.982159,256.84801 Z M885.42117,236.090039 C890.322383,225.999308 898.683149,217.35024 910.503719,210.142575 C922.32429,202.93491 935.586194,199.331131 950.289831,199.331131 C963.551935,199.331131 974.939874,201.565474 984.453992,206.034226 C993.96811,210.502979 1001.89642,216.485251 1008.23917,223.981222 C1014.58191,231.477194 1019.26682,240.270413 1022.29404,250.361144 C1025.32126,260.451875 1026.83485,271.263211 1026.83485,282.795475 L1026.83485,409.938049 L986.183823,409.938049 L986.183823,296.634122 C986.183823,288.273231 985.535143,280.344918 984.237763,272.848947 C982.940384,265.352975 980.56189,258.722023 977.102211,252.955891 C973.642549,247.189759 968.957619,242.576922 963.047334,239.117243 C957.137049,235.657564 949.424963,233.92775 939.910845,233.92775 C923.765676,233.92775 910.503771,240.054174 900.124733,252.307204 C889.745696,264.560235 884.556255,280.921389 884.556255,301.391157 L884.556255,409.938049 L843.905228,409.938049 L843.905228,83 L884.556255,83 L884.556255,236.090039 L885.42117,236.090039 Z M1223.17066,277.173524 C1223.17066,261.893274 1218.55783,250.57741 1209.33202,243.225592 C1200.1062,235.873773 1187.85336,232.197919 1172.57311,232.197919 C1161.04084,232.197919 1150.15743,234.432262 1139.92255,238.901014 C1129.68766,243.369767 1121.11067,249.063737 1114.19131,255.983095 L1092.56843,230.035631 C1102.65916,220.521513 1114.98408,213.025654 1129.54356,207.547828 C1144.10305,202.070003 1159.74344,199.331131 1176.46523,199.331131 C1191.16886,199.331131 1203.92624,201.421323 1214.73774,205.601769 C1225.54923,209.782214 1234.41453,215.476184 1241.33389,222.683849 C1248.25325,229.891514 1253.4427,238.396431 1256.90237,248.198856 C1260.36205,258.00128 1262.09186,268.524313 1262.09186,279.76827 L1262.09186,369.287022 C1262.09186,376.206381 1262.30809,383.486013 1262.74055,391.126138 C1263.17301,398.766263 1263.96584,405.036837 1265.11906,409.938049 L1228.36016,409.938049 C1226.0537,400.135625 1224.90049,390.333348 1224.90049,380.530923 L1223.60312,380.530923 C1216.10715,391.486574 1206.66525,399.991491 1195.27714,406.04593 C1183.88903,412.100368 1170.4109,415.127542 1154.84234,415.127542 C1146.76976,415.127542 1138.33691,414.046409 1129.54356,411.884109 C1120.75021,409.72181 1112.74982,406.190107 1105.54216,401.288895 C1098.33449,396.387682 1092.35222,389.900881 1087.59516,381.828296 C1082.8381,373.755712 1080.45961,363.809283 1080.45961,351.988713 C1080.45961,336.420156 1084.63999,324.095234 1093.00088,315.013576 C1101.36178,305.931918 1112.31726,299.012664 1125.86767,294.255605 C1139.41808,289.498546 1154.6981,286.399296 1171.70819,284.957763 C1188.71828,283.51623 1205.87227,282.795475 1223.17066,282.795475 L1223.17066,277.173524 Z M1213.22414,312.202601 C1203.1334,312.202601 1192.68245,312.635054 1181.87095,313.499974 C1171.05945,314.364894 1161.25717,316.094707 1152.46382,318.689467 C1143.67047,321.284226 1136.39084,325.176307 1130.62471,330.365826 C1124.85858,335.555345 1121.97555,342.474599 1121.97555,351.123797 C1121.97555,357.178236 1123.20084,362.223526 1125.65144,366.259818 C1128.10205,370.29611 1131.34545,373.611587 1135.38174,376.206346 C1139.41803,378.801105 1143.88672,380.602995 1148.78793,381.612068 C1153.68914,382.621141 1158.73443,383.12567 1163.92395,383.12567 C1182.95219,383.12567 1197.58353,377.4317 1207.81841,366.043589 C1218.0533,354.655478 1223.17066,340.31244 1223.17066,323.014044 L1223.17066,312.202601 L1213.22414,312.202601 Z M1425.99334,238.252328 L1371.50367,238.252328 L1371.50367,345.069389 C1371.50367,357.466573 1373.81009,366.331868 1378.42299,371.66554 C1383.0359,376.999212 1390.3876,379.666008 1400.47834,379.666008 C1404.22632,379.666008 1408.26255,379.233554 1412.58715,378.368635 C1416.91175,377.503715 1420.80383,376.206355 1424.26351,374.476515 L1425.56088,407.775761 C1420.65967,409.5056 1415.254,410.875036 1409.34372,411.884109 C1403.43343,412.893182 1397.30701,413.397711 1390.96427,413.397711 C1371.64772,413.397711 1356.87223,408.064119 1346.63735,397.396775 C1336.40246,386.729431 1331.2851,370.728655 1331.2851,349.393966 L1331.2851,238.252328 L1291.93144,238.252328 L1291.93144,204.953082 L1331.2851,204.953082 L1331.2851,146.13883 L1371.50367,146.13883 L1371.50367,204.953082 L1425.99334,204.953082 L1425.99334,238.252328 Z M1506.07776,204.953082 L1552.35074,361.502783 L1553.21566,361.502783 L1602.08338,204.953082 L1644.8967,204.953082 L1694.62934,361.502783 L1695.49425,361.502783 L1741.76723,204.953082 L1784.58055,204.953082 L1716.68468,409.938049 L1674.30382,409.938049 L1623.70627,255.983095 L1622.84135,255.983095 L1572.67625,409.938049 L1530.2954,409.938049 L1461.96707,204.953082 L1506.07776,204.953082 Z M2032.81129,307.013108 C2032.81129,322.869971 2030.00034,337.429236 2024.37836,350.691339 C2018.75638,363.953443 2010.97222,375.413458 2001.02564,385.07173 C1991.07907,394.730001 1979.33075,402.22586 1965.78034,407.559532 C1952.22993,412.893204 1937.67066,415.56 1922.10211,415.56 C1906.53355,415.56 1891.97429,412.893204 1878.42388,407.559532 C1864.87346,402.22586 1853.19722,394.730001 1843.3948,385.07173 C1833.59237,375.413458 1825.88029,363.953443 1820.25831,350.691339 C1814.63633,337.429236 1811.82538,322.869971 1811.82538,307.013108 C1811.82538,291.156245 1814.63633,276.669056 1820.25831,263.551105 C1825.88029,250.433155 1833.59237,239.117291 1843.3948,229.603173 C1853.19722,220.089055 1864.87346,212.665272 1878.42388,207.331599 C1891.97429,201.997927 1906.53355,199.331131 1922.10211,199.331131 C1937.67066,199.331131 1952.22993,201.997927 1965.78034,207.331599 C1979.33075,212.665272 1991.07907,220.089055 2001.02564,229.603173 C2010.97222,239.117291 2018.75638,250.433155 2024.37836,263.551105 C2030.00034,276.669056 2032.81129,291.156245 2032.81129,307.013108 Z M1990.43043,307.013108 C1990.43043,297.210684 1988.91683,287.84086 1985.88962,278.903355 C1982.8624,269.96585 1978.46579,262.109613 1972.69966,255.334408 C1966.93353,248.559203 1959.79805,243.153536 1951.293,239.117243 C1942.78796,235.080951 1933.05776,233.062835 1922.10211,233.062835 C1911.14646,233.062835 1901.41625,235.080951 1892.91121,239.117243 C1884.40616,243.153536 1877.27068,248.559203 1871.50455,255.334408 C1865.73842,262.109613 1861.34181,269.96585 1858.31459,278.903355 C1855.28737,287.84086 1853.77378,297.210684 1853.77378,307.013108 C1853.77378,316.815532 1855.28737,326.185356 1858.31459,335.122861 C1861.34181,344.060365 1865.73842,351.988678 1871.50455,358.908036 C1877.27068,365.827395 1884.40616,371.305138 1892.91121,375.34143 C1901.41625,379.377723 1911.14646,381.395839 1922.10211,381.395839 C1933.05776,381.395839 1942.78796,379.377723 1951.293,375.34143 C1959.79805,371.305138 1966.93353,365.827395 1972.69966,358.908036 C1978.46579,351.988678 1982.8624,344.060365 1985.88962,335.122861 C1988.91683,326.185356 1990.43043,316.815532 1990.43043,307.013108 Z M2296.61051,307.013108 C2296.61051,322.869971 2293.79956,337.429236 2288.17758,350.691339 C2282.5556,363.953443 2274.77144,375.413458 2264.82486,385.07173 C2254.87829,394.730001 2243.12997,402.22586 2229.57956,407.559532 C2216.02915,412.893204 2201.46988,415.56 2185.90133,415.56 C2170.33277,415.56 2155.77351,412.893204 2142.22309,407.559532 C2128.67268,402.22586 2116.99644,394.730001 2107.19402,385.07173 C2097.39159,375.413458 2089.67951,363.953443 2084.05753,350.691339 C2078.43555,337.429236 2075.6246,322.869971 2075.6246,307.013108 C2075.6246,291.156245 2078.43555,276.669056 2084.05753,263.551105 C2089.67951,250.433155 2097.39159,239.117291 2107.19402,229.603173 C2116.99644,220.089055 2128.67268,212.665272 2142.22309,207.331599 C2155.77351,201.997927 2170.33277,199.331131 2185.90133,199.331131 C2201.46988,199.331131 2216.02915,201.997927 2229.57956,207.331599 C2243.12997,212.665272 2254.87829,220.089055 2264.82486,229.603173 C2274.77144,239.117291 2282.5556,250.433155 2288.17758,263.551105 C2293.79956,276.669056 2296.61051,291.156245 2296.61051,307.013108 Z M2254.22965,307.013108 C2254.22965,297.210684 2252.71605,287.84086 2249.68884,278.903355 C2246.66162,269.96585 2242.26501,262.109613 2236.49888,255.334408 C2230.73275,248.559203 2223.59727,243.153536 2215.09222,239.117243 C2206.58718,235.080951 2196.85698,233.062835 2185.90133,233.062835 C2174.94568,233.062835 2165.21547,235.080951 2156.71043,239.117243 C2148.20538,243.153536 2141.0699,248.559203 2135.30377,255.334408 C2129.53764,262.109613 2125.14103,269.96585 2122.11381,278.903355 C2119.08659,287.84086 2117.573,297.210684 2117.573,307.013108 C2117.573,316.815532 2119.08659,326.185356 2122.11381,335.122861 C2125.14103,344.060365 2129.53764,351.988678 2135.30377,358.908036 C2141.0699,365.827395 2148.20538,371.305138 2156.71043,375.34143 C2165.21547,379.377723 2174.94568,381.395839 2185.90133,381.395839 C2196.85698,381.395839 2206.58718,379.377723 2215.09222,375.34143 C2223.59727,371.305138 2230.73275,365.827395 2236.49888,358.908036 C2242.26501,351.988678 2246.66162,344.060365 2249.68884,335.122861 C2252.71605,326.185356 2254.22965,316.815532 2254.22965,307.013108 Z M2453.16021,238.252328 L2398.67053,238.252328 L2398.67053,345.069389 C2398.67053,357.466573 2400.97695,366.331868 2405.58986,371.66554 C2410.20276,376.999212 2417.55447,379.666008 2427.6452,379.666008 C2431.39319,379.666008 2435.42942,379.233554 2439.75402,378.368635 C2444.07862,377.503715 2447.9707,376.206355 2451.43038,374.476515 L2452.72775,407.775761 C2447.82654,409.5056 2442.42087,410.875036 2436.51059,411.884109 C2430.6003,412.893182 2424.47388,413.397711 2418.13113,413.397711 C2398.81459,413.397711 2384.0391,408.064119 2373.80421,397.396775 C2363.56933,386.729431 2358.45196,370.728655 2358.45196,349.393966 L2358.45196,238.252328 L2319.09831,238.252328 L2319.09831,204.953082 L2358.45196,204.953082 L2358.45196,146.13883 L2398.67053,146.13883 L2398.67053,204.953082 L2453.16021,204.953082 L2453.16021,238.252328 Z" id="chatwoot" stroke="#273445" stroke-width="8" fill="#273444"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/brand-assets/logo_thumbnail.svg b/public/brand-assets/logo_thumbnail.svg
new file mode 100644
index 000000000..16529675d
--- /dev/null
+++ b/public/brand-assets/logo_thumbnail.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+    <title>woot-log</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="woot-log" fill-rule="nonzero">
+            <circle id="Oval" fill="#47A7F6" cx="256" cy="256" r="256"></circle>
+            <path d="M362.807947,368.807947 L244.122956,368.807947 C178.699407,368.807947 125.456954,315.561812 125.456954,250.12177 C125.456954,184.703089 178.699407,131.456954 244.124143,131.456954 C309.565494,131.456954 362.807947,184.703089 362.807947,250.12177 L362.807947,368.807947 Z" id="Fill-1" stroke="#FFFFFF" stroke-width="6" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file