feat: Add an extended bubble design for the widget (#1123)
* feat: Add a new design for chat bubble Signed-off-by: Pranav Raj Sreepuram <pranavrajs@gmail.com> * Add i18n * Fix stye issues * Set fixed font-size * Update docs for bubble
This commit is contained in:
Pranav Raj S
@@ -77,12 +77,13 @@ export default {
|
||||
|
||||
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.setLocale(message.locale);
|
||||
this.setPosition(message.position);
|
||||
this.setHideMessageBubble(message.hideMessageBubble);
|
||||
} else if (message.event === 'widget-visible') {
|
||||
this.scrollConversationToBottom();
|
||||
@@ -100,6 +101,7 @@ export default {
|
||||
this.$store.dispatch('contacts/update', message);
|
||||
} 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') {
|
||||
@@ -118,6 +120,12 @@ export default {
|
||||
const container = this.$el.querySelector('.conversation-wrap');
|
||||
container.scrollTop = container.scrollHeight;
|
||||
},
|
||||
setBubbleLabel() {
|
||||
IFrameHelper.sendMessage({
|
||||
event: 'setBubbleLabel',
|
||||
label: this.$t('BUBBLE.LABEL'),
|
||||
});
|
||||
},
|
||||
setLocale(locale) {
|
||||
const { enabledLanguages } = window.chatwootWebChannel;
|
||||
if (enabledLanguages.some(lang => lang.iso_639_1_code === locale)) {
|
||||
|
||||
@@ -1,141 +0,0 @@
|
||||
export const SDK_CSS = ` .woot-widget-holder {
|
||||
z-index: 2147483000 !important;
|
||||
position: fixed !important;
|
||||
-moz-box-shadow: 0 5px 40px rgba(0, 0, 0, .16) !important;
|
||||
-o-box-shadow: 0 5px 40px rgba(0, 0, 0, .16) !important;
|
||||
-webkit-box-shadow: 0 5px 40px rgba(0, 0, 0, .16) !important;
|
||||
box-shadow: 0 5px 40px rgba(0, 0, 0, .16) !important;
|
||||
overflow: hidden !important;
|
||||
opacity: 1;
|
||||
transition-property: opacity, bottom;
|
||||
transition-duration: 0.5s, 0.5s;
|
||||
}
|
||||
|
||||
.woot-widget-holder.has-unread-view {
|
||||
box-shadow: none !important;
|
||||
-moz-box-shadow: none !important;
|
||||
-o-box-shadow: none !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
-o-border-radius: 0 !important;
|
||||
-moz-border-radius: 0 !important;
|
||||
-webkit-border-radius: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
bottom: 94px;
|
||||
}
|
||||
|
||||
.woot-widget-holder iframe {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.woot-widget-bubble {
|
||||
z-index: 2147483000 !important;
|
||||
-moz-box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
|
||||
-o-box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
|
||||
-webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
|
||||
-o-border-radius: 100px !important;
|
||||
-moz-border-radius: 100px !important;
|
||||
-webkit-border-radius: 100px !important;
|
||||
border-radius: 100px !important;
|
||||
background: #1f93ff;
|
||||
position: fixed;
|
||||
cursor: pointer;
|
||||
bottom: 20px;
|
||||
width: 64px !important;
|
||||
height: 64px !important;
|
||||
}
|
||||
|
||||
.woot-widget-bubble.woot-elements--left {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.woot-widget-bubble.woot-elements--right {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 667px) {
|
||||
.woot-widget-holder.woot-elements--left {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.woot-widget-holder.woot-elements--right {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.woot-widget-bubble:hover {
|
||||
background: #1f93ff;
|
||||
-moz-box-shadow: 0 8px 32px rgba(0, 0, 0, .4) !important;
|
||||
-o-box-shadow: 0 8px 32px rgba(0, 0, 0, .4) !important;
|
||||
-webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, .4) !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, .4) !important;
|
||||
}
|
||||
|
||||
.woot-widget-bubble img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.woot--close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.woot--close:before, .woot--close:after {
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
top: 20px;
|
||||
content: ' ';
|
||||
height: 24px;
|
||||
width: 2px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.woot--close:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.woot--close:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
|
||||
.woot--hide {
|
||||
visibility: hidden !important;
|
||||
z-index: -1 !important;
|
||||
opacity: 0;
|
||||
bottom: -20000px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 667px) {
|
||||
.woot-widget-holder {
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.woot-widget-bubble.woot--close {
|
||||
visibility: hidden !important;
|
||||
z-index: -1 !important;
|
||||
opacity: 0;
|
||||
bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 667px) {
|
||||
.woot-widget-holder {
|
||||
bottom: 104px;
|
||||
height: calc(85% - 64px - 20px);
|
||||
width: 400px !important;
|
||||
min-height: 250px !important;
|
||||
max-height: 590px !important;
|
||||
-o-border-radius: 16px !important;
|
||||
-moz-border-radius: 16px !important;
|
||||
-webkit-border-radius: 16px !important;
|
||||
border-radius: 16px !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -18,6 +18,9 @@
|
||||
"VIEW_MESSAGES_BUTTON": "See new messages",
|
||||
"CLOSE_MESSAGES_BUTTON": "Close"
|
||||
},
|
||||
"BUBBLE": {
|
||||
"LABEL": "Chat with us"
|
||||
},
|
||||
"POWERED_BY": "Powered by Chatwoot",
|
||||
"EMAIL_PLACEHOLDER": "Please enter your email",
|
||||
"CHAT_PLACEHOLDER": "Type your message"
|
||||
|
||||
@@ -14,6 +14,9 @@
|
||||
"OTHERS_ARE_AVAILABLE": "d'autres sont disponibles",
|
||||
"AND": "et"
|
||||
},
|
||||
"BUBBLE": {
|
||||
"LABEL": "Discute avec nous"
|
||||
},
|
||||
"POWERED_BY": "Propulsé par Chatwoot",
|
||||
"EMAIL_PLACEHOLDER": "Veuillez saisir votre adresse de courriel",
|
||||
"CHAT_PLACEHOLDER": "Tapez votre message"
|
||||
|
||||
@@ -14,6 +14,9 @@
|
||||
"OTHERS_ARE_AVAILABLE": "others are available",
|
||||
"AND": "and"
|
||||
},
|
||||
"BUBBLE": {
|
||||
"LABEL": "ഞങ്ങളുമായി ചാറ്റുചെയ്യുക"
|
||||
},
|
||||
"POWERED_BY": "Powered by Chatwoot",
|
||||
"EMAIL_PLACEHOLDER": "ദയവായി നിങ്ങളുടെ ഇമെയിൽ നൽകുക",
|
||||
"CHAT_PLACEHOLDER": "Type your message"
|
||||
|
||||
@@ -14,6 +14,9 @@
|
||||
"OTHERS_ARE_AVAILABLE": "others are available",
|
||||
"AND": "and"
|
||||
},
|
||||
"BUBBLE": {
|
||||
"LABEL": "Chat met ons"
|
||||
},
|
||||
"POWERED_BY": "Mogelijk gemaakt door Chatwoot",
|
||||
"EMAIL_PLACEHOLDER": "Voer uw e-mailadres in",
|
||||
"CHAT_PLACEHOLDER": "Typ uw bericht"
|
||||
|
||||
Reference in New Issue
Block a user