chore: Reduce the click area on Branding (#1340)

app/javascript/sdk/IFrameHelper.js

@@ -185,7 +185,8 @@ export const IFrameHelper = {
   },
   setCurrentUrl: () => {
     IFrameHelper.sendMessage('set-current-url', {
-      refererURL: window.location.href,
+      referrerURL: window.location.href,
+      referrerHost: window.location.host,
     });
   },
   toggleCloseButton: () => {

app/javascript/shared/constants/busEvents.js

@@ -1,3 +1,4 @@
 export const BUS_EVENTS = {
+  SET_REFERRER_HOST: 'SET_REFERRER_HOST',
   SET_TWEET_REPLY: 'SET_TWEET_REPLY',
 };

app/javascript/widget/App.vue

@@ -23,6 +23,7 @@ import { IFrameHelper } from 'widget/helpers/utils';
 
 import Router from './views/Router';
 import { getLocale } from './helpers/urlParamsHelper';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {
   name: 'App',
@@ -156,7 +157,8 @@ export default {
         } else if (message.event === 'widget-visible') {
           this.scrollConversationToBottom();
         } else if (message.event === 'set-current-url') {
-          window.refererURL = message.refererURL;
+          window.referrerURL = message.referrerURL;
+          bus.$emit(BUS_EVENTS.SET_REFERRER_HOST, message.referrerHost);
         } else if (message.event === 'toggle-close-button') {
           this.isMobile = message.showClose;
         } else if (message.event === 'push-event') {

app/javascript/widget/api/endPoints.js

@@ -1,7 +1,7 @@
 import { buildSearchParamsWithLocale } from '../helpers/urlParamsHelper';
 
 const sendMessage = content => {
-  const refererURL = window.refererURL || '';
+  const referrerURL = window.referrerURL || '';
   const search = buildSearchParamsWithLocale(window.location.search);
   return {
     url: `/api/v1/widget/messages${search}`,
@@ -9,20 +9,20 @@ const sendMessage = content => {
       message: {
         content,
         timestamp: new Date().toString(),
-        referer_url: refererURL,
+        referer_url: referrerURL,
       },
     },
   };
 };
 
 const sendAttachment = ({ attachment }) => {
-  const { refererURL = '' } = window;
+  const { referrerURL = '' } = window;
   const timestamp = new Date().toString();
   const { file } = attachment;
 
   const formData = new FormData();
   formData.append('message[attachments][]', file, file.name);
-  formData.append('message[referer_url]', refererURL);
+  formData.append('message[referer_url]', referrerURL);
   formData.append('message[timestamp]', timestamp);
   return {
     url: `/api/v1/widget/messages${window.location.search}`,

app/javascript/widget/components/Branding.vue

@@ -1,29 +1,48 @@
 <template>
+  <div v-if="globalConfig.brandName" class="branding">
     <a
-    v-if="globalConfig.brandName"
-    class="branding"
-    :href="`${globalConfig.widgetBrandURL}?utm_source=widget_branding`"
+      :href="brandRedirectURL"
       rel="noreferrer noopener nofollow"
       target="_blank"
+      class="branding--link"
     >
       <img :alt="globalConfig.brandName" :src="globalConfig.logoThumbnail" />
       <span>
         {{ useInstallationName($t('POWERED_BY'), globalConfig.brandName) }}
       </span>
     </a>
+  </div>
   <div v-else class="brand--alternative" />
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {
   mixins: [globalConfigMixin],
+  data() {
+    return {
+      referrerHost: '',
+    };
+  },
   computed: {
     ...mapGetters({
       globalConfig: 'globalConfig/get',
     }),
+    brandRedirectURL() {
+      const baseURL = `${this.globalConfig.widgetBrandURL}?utm_source=widget_branding`;
+      if (this.referrerHost) {
+        return `${baseURL}&utm_referrer=${this.referrerHost}`;
+      }
+      return baseURL;
+    },
+  },
+  mounted() {
+    bus.$on(BUS_EVENTS.SET_REFERRER_HOST, referrerHost => {
+      this.referrerHost = referrerHost;
+    });
   },
 };
 </script>
@@ -34,22 +53,10 @@ export default {
 
 .branding {
   align-items: center;
-  color: $color-light-gray;
-  opacity: 0.9;
   display: flex;
-  filter: grayscale(1);
-  font-size: $font-size-small;
   justify-content: center;
-  text-align: center;
-  text-decoration: none;
   padding: $space-normal 0 $space-slab;
-  cursor: pointer;
-
-  &:hover {
-    filter: grayscale(0);
-    opacity: 1;
-    color: $color-gray;
-  }
+  text-align: center;
 
   img {
     margin-right: $space-smaller;
@@ -57,6 +64,23 @@ export default {
     max-height: $space-slab;
   }
 }
+
+.branding--link {
+  color: $color-light-gray;
+  cursor: pointer;
+  display: flex;
+  filter: grayscale(1);
+  font-size: $font-size-small;
+  opacity: 0.9;
+  text-decoration: none;
+
+  &:hover {
+    filter: grayscale(0);
+    opacity: 1;
+    color: $color-gray;
+  }
+}
+
 .brand--alternative {
   padding: $space-slab;
 }