feat: Add a popout option on webwidget (#1174)
* feat: Add a popout option on webwidget
This commit is contained in:
Pranav Raj S
GitHub
parent
ce13efd273
commit
45cd949c40
17 changed files with 347 additions and 127 deletions
|
|
@ -11,6 +11,7 @@
|
|||
:unread-message-count="unreadMessageCount"
|
||||
:is-left-aligned="isLeftAligned"
|
||||
:hide-message-bubble="hideMessageBubble"
|
||||
:show-popout-button="showPopoutButton"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
@ -21,6 +22,7 @@ import { setHeader } from 'widget/helpers/axios';
|
|||
import { IFrameHelper } from 'widget/helpers/utils';
|
||||
|
||||
import Router from './views/Router';
|
||||
import { getLocale } from './helpers/urlParamsHelper';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
|
|
@ -33,6 +35,7 @@ export default {
|
|||
isMobile: false,
|
||||
hideMessageBubble: false,
|
||||
widgetPosition: 'right',
|
||||
showPopoutButton: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -49,74 +52,25 @@ export default {
|
|||
const isLeft = this.widgetPosition === 'left';
|
||||
return isLeft;
|
||||
},
|
||||
isIFrame() {
|
||||
return IFrameHelper.isIFrame();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const { websiteToken, locale } = window.chatwootWebChannel;
|
||||
this.setLocale(locale);
|
||||
|
||||
if (IFrameHelper.isIFrame()) {
|
||||
IFrameHelper.sendMessage({
|
||||
event: 'loaded',
|
||||
config: {
|
||||
authToken: window.authToken,
|
||||
channelConfig: window.chatwootWebChannel,
|
||||
},
|
||||
});
|
||||
if (this.isIFrame) {
|
||||
this.registerListeners();
|
||||
this.sendLoadedEvent();
|
||||
setHeader('X-Auth-Token', window.authToken);
|
||||
} else {
|
||||
setHeader('X-Auth-Token', window.authToken);
|
||||
this.fetchOldConversations();
|
||||
this.fetchAvailableAgents(websiteToken);
|
||||
this.setLocale(getLocale(window.location.search));
|
||||
}
|
||||
this.setWidgetColor(window.chatwootWebChannel);
|
||||
|
||||
window.addEventListener('message', e => {
|
||||
const wootPrefix = 'chatwoot-widget:';
|
||||
const isDataNotString = typeof e.data !== 'string';
|
||||
const isNotFromWoot = isDataNotString || e.data.indexOf(wootPrefix) !== 0;
|
||||
|
||||
if (isNotFromWoot) return;
|
||||
|
||||
const message = JSON.parse(e.data.replace(wootPrefix, ''));
|
||||
if (message.event === 'config-set') {
|
||||
this.setLocale(message.locale);
|
||||
this.setBubbleLabel();
|
||||
this.setPosition(message.position);
|
||||
this.fetchOldConversations().then(() => {
|
||||
this.setUnreadView();
|
||||
});
|
||||
this.fetchAvailableAgents(websiteToken);
|
||||
this.setHideMessageBubble(message.hideMessageBubble);
|
||||
} else if (message.event === 'widget-visible') {
|
||||
this.scrollConversationToBottom();
|
||||
} else if (message.event === 'set-current-url') {
|
||||
window.refererURL = message.refererURL;
|
||||
} else if (message.event === 'toggle-close-button') {
|
||||
this.isMobile = message.showClose;
|
||||
} else if (message.event === 'push-event') {
|
||||
this.createWidgetEvents(message);
|
||||
} else if (message.event === 'set-label') {
|
||||
this.$store.dispatch('conversationLabels/create', message.label);
|
||||
} else if (message.event === 'remove-label') {
|
||||
this.$store.dispatch('conversationLabels/destroy', message.label);
|
||||
} else if (message.event === 'set-user') {
|
||||
this.$store.dispatch('contacts/update', message);
|
||||
} else if (message.event === 'set-custom-attributes') {
|
||||
this.$store.dispatch(
|
||||
'contacts/setCustomAttributes',
|
||||
message.customAttributes
|
||||
);
|
||||
} else if (message.event === 'delete-custom-attribute') {
|
||||
this.$store.dispatch('contacts/setCustomAttributes', {
|
||||
[message.customAttribute]: null,
|
||||
});
|
||||
} else if (message.event === 'set-locale') {
|
||||
this.setLocale(message.locale);
|
||||
this.setBubbleLabel();
|
||||
} else if (message.event === 'set-unread-view') {
|
||||
this.showUnreadView = true;
|
||||
} else if (message.event === 'unset-unread-view') {
|
||||
this.showUnreadView = false;
|
||||
}
|
||||
});
|
||||
|
||||
this.$store.dispatch('conversationAttributes/get');
|
||||
this.setWidgetColor(window.chatwootWebChannel);
|
||||
this.registerUnreadEvents();
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -147,15 +101,23 @@ export default {
|
|||
this.hideMessageBubble = !!hideBubble;
|
||||
},
|
||||
registerUnreadEvents() {
|
||||
bus.$on('on-agent-message-recieved', () => this.setUnreadView());
|
||||
bus.$on('on-agent-message-recieved', () => {
|
||||
if (!this.isIFrame) {
|
||||
this.setUserLastSeen();
|
||||
}
|
||||
this.setUnreadView();
|
||||
});
|
||||
bus.$on('on-unread-view-clicked', () => {
|
||||
this.unsetUnreadView();
|
||||
this.setUserLastSeen();
|
||||
});
|
||||
},
|
||||
setPopoutDisplay(showPopoutButton) {
|
||||
this.showPopoutButton = showPopoutButton;
|
||||
},
|
||||
setUnreadView() {
|
||||
const { unreadMessageCount } = this;
|
||||
if (IFrameHelper.isIFrame() && unreadMessageCount > 0) {
|
||||
if (this.isIFrame && unreadMessageCount > 0) {
|
||||
IFrameHelper.sendMessage({
|
||||
event: 'setUnreadMode',
|
||||
unreadMessageCount,
|
||||
|
|
@ -163,7 +125,7 @@ export default {
|
|||
}
|
||||
},
|
||||
unsetUnreadView() {
|
||||
if (IFrameHelper.isIFrame()) {
|
||||
if (this.isIFrame) {
|
||||
IFrameHelper.sendMessage({ event: 'resetUnreadMode' });
|
||||
}
|
||||
},
|
||||
|
|
@ -176,6 +138,63 @@ export default {
|
|||
this.setUserLastSeen();
|
||||
this.$store.dispatch('events/create', { name: eventName });
|
||||
},
|
||||
registerListeners() {
|
||||
const { websiteToken } = window.chatwootWebChannel;
|
||||
window.addEventListener('message', e => {
|
||||
if (!IFrameHelper.isAValidEvent(e)) {
|
||||
return;
|
||||
}
|
||||
const message = IFrameHelper.getMessage(e);
|
||||
if (message.event === 'config-set') {
|
||||
this.setLocale(message.locale);
|
||||
this.setBubbleLabel();
|
||||
this.setPosition(message.position);
|
||||
this.fetchOldConversations().then(() => this.setUnreadView());
|
||||
this.setPopoutDisplay(message.showPopoutButton);
|
||||
this.fetchAvailableAgents(websiteToken);
|
||||
this.setHideMessageBubble(message.hideMessageBubble);
|
||||
} else if (message.event === 'widget-visible') {
|
||||
this.scrollConversationToBottom();
|
||||
} else if (message.event === 'set-current-url') {
|
||||
window.refererURL = message.refererURL;
|
||||
} else if (message.event === 'toggle-close-button') {
|
||||
this.isMobile = message.showClose;
|
||||
} else if (message.event === 'push-event') {
|
||||
this.createWidgetEvents(message);
|
||||
} else if (message.event === 'set-label') {
|
||||
this.$store.dispatch('conversationLabels/create', message.label);
|
||||
} else if (message.event === 'remove-label') {
|
||||
this.$store.dispatch('conversationLabels/destroy', message.label);
|
||||
} else if (message.event === 'set-user') {
|
||||
this.$store.dispatch('contacts/update', message);
|
||||
} else if (message.event === 'set-custom-attributes') {
|
||||
this.$store.dispatch(
|
||||
'contacts/setCustomAttributes',
|
||||
message.customAttributes
|
||||
);
|
||||
} else if (message.event === 'delete-custom-attribute') {
|
||||
this.$store.dispatch('contacts/setCustomAttributes', {
|
||||
[message.customAttribute]: null,
|
||||
});
|
||||
} else if (message.event === 'set-locale') {
|
||||
this.setLocale(message.locale);
|
||||
this.setBubbleLabel();
|
||||
} else if (message.event === 'set-unread-view') {
|
||||
this.showUnreadView = true;
|
||||
} else if (message.event === 'unset-unread-view') {
|
||||
this.showUnreadView = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
sendLoadedEvent() {
|
||||
IFrameHelper.sendMessage({
|
||||
event: 'loaded',
|
||||
config: {
|
||||
authToken: window.authToken,
|
||||
channelConfig: window.chatwootWebChannel,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue