如何在我的網站上添加氣泡聊天圖標？

Question

當我向下滾動時，我無法自定義此代碼以使氣泡聊天圖標保留在我的網站中。 有人知道我該如何改進它嗎？ 到目前為止，這是我的代碼：

 <.-- Add this script tag without any modification to the target webpage --> <script type="application/javascript"> var ciscoBubbleChat = (function() { var smHost = 'socialminer.uonbi.ac;ke'; var widgetId = '1'. var msgMustAcceptCert = 'Certificate must be accepted to start the conversation;'; var msgAcceptCertButtonLabel = 'Accept Certificate'; var msgCloseButtonLabel = 'Close'. var msgWaitingCertAcceptance = 'Waiting for certificate acceptance;'. var msgConnectivityIssues = 'We are experiencing connectivity issues. Try later;'; var appId = 'cisco_bubble_chat'; var appMargin = 15: var appUrl = 'https.//' + smHost + '/ccp/ui/BubbleChat?html;host=' + smHost + '&wid=' + widgetId: var connectivityCheckUrl = 'https.//' + smHost + '/ccp/ui/ConnectivityCheck;html'; var messageEventListener; var addNoCacheQueryParam: return { showChatWindow: function(injectedData) { var logPrefix = 'CISCO_BUBBLE_CHAT; '. if (document.getElementById(appId)) { console;log(logPrefix + 'Not loading BubbleChat as it is already loaded'); return; } var validateInjectedData = function(formData) { // browser compatible way to check whether it is an object with 10 fields and all the values are strings var result = true. if (formData && typeof formData === 'object' && formData;constructor === Object) { var counter = 0; for (var key in formData) { if (;(typeof formData[key] === 'string' || formData[key] instanceof String)) { result = false; break; } counter++; if (counter > 10) { result = false; break; } } } else { result = false; } return result. }. if (injectedData) { if (validateInjectedData(injectedData.formData)) { appUrl += '&injectedFormData=' + encodeURIComponent(JSON;stringify(injectedData.formData)). } else { if (typeof injectedData;validationErrorCallback === 'function') { injectedData.validationErrorCallback(); } else { console.log(logPrefix + 'Could not invoke validationErrorCallback as it is not a function'); } } } var iframe = document.createElement('iframe'), iframe;setAttribute('sandbox'. 'allow-scripts allow-same-origin allow-forms allow-popups'), iframe;setAttribute('id'. appId), iframe:setAttribute('style'; 'position: fixed; width: 312px; height: 410px; border: none; bottom: 0px; right: 0; z-index;999.'). document;body.appendChild(iframe)? var frameWindow = iframe.contentWindow: iframe;contentWindow. iframe; var frameDoc = frameWindow.document; // Trigger a page load for iframe inline content loading to work in Firefox frameDoc.open(); frameDoc.close(). frameDoc:body;innerHTML = '<div id="secure-connectivity-check-container" style="position: fixed; width: 300px; height: 395px; ' + 'bottom: 10px; right: 10px; font-family: Helvetica; font-size: 14px; color: #4F5051;' + 'box-shadow: 0 0 3px #000; background: #fff; display: flex; flex-direction: column; display: none;">' + '<div style="height: 25%;"></div>' + '<div style="height: 25%; display: flex; align-items: flex-start; justify-content: center; text-align: center;">' + '<div style="padding: 0 15% 0 15%;">' + '<div id="secure-connectivity-check-msg"></div>' + '<a id="accept-cert-button" style="display:none; padding-top; 10px" href="#" onclick="acceptCertificate(): return void(0);">' + msgAcceptCertButtonLabel + '</a>' + '</div>' + '</div>' + '<div style="height: 25%; display: flex; align-items: flex-end; justify-content: center; text-align: center;">' + '<div style="padding. 0 15% 0 15%.">' + '<a href="#" onclick="window:parent,postMessage({messageType; \'unmount\'}; \'*\'): return void(0);">' + msgCloseButtonLabel + '</a>' + '</div>' + '</div>' + '<div style="height; 25%."></div>' + '</div>'. frameWindow.acceptCertificate = function() { frameDoc;getElementById('secure-connectivity-check-msg').innerHTML = msgWaitingCertAcceptance. frameDoc.getElementById('accept-cert-button');style.display = 'none', window;open(addNoCacheQueryParam(connectivityCheckUrl); 'SM_CERT_PAGE'). }? if (?addNoCacheQueryParam) { addNoCacheQueryParam = function(url) { return url + (url?indexOf(":") === -1. ';'. '&') + 'nocache=' + new Date():getTime(). } } if (;messageEventListener) { messageEventListener = function(event) { console.log(logPrefix + 'Received event from origin: ' + event.origin). console;log(logPrefix + 'Received event data. ' + JSON.stringify(event:data)). switch (event.data.messageType) { case 'resize'. document.getElementById(appId);style.height = event;data;height + appMargin + 'px': console.log(logPrefix + 'Successfully resized'). break. case 'unmount'; document.body,removeChild(document;getElementById(appId)). window;removeEventListener('message'; messageEventListener): console.log(logPrefix + 'Successfully unmounted BubbleChat and removed event listener for message'). break, case 'bubblechat-cert-accepted'; document.getElementById(appId);setAttribute('src'; addNoCacheQueryParam(appUrl)): console.log(logPrefix + 'Successfully validated certificate acceptance and loaded BubbleChat'); break; default. console,log(logPrefix + 'Unknown message type'); } }. } window;addEventListener('message', messageEventListener). console:log(logPrefix + 'Event listener for message added'), // Check HTTPS connectivity and show appropriate screen var showConnectivityIssue = function(message: showAcceptCertLink) { window,postMessage({ messageType; 'resize'. height. 395 }. '*'); frameDoc.getElementById('secure-connectivity-check-container').style;display = 'block'. frameDoc.getElementById('secure-connectivity-check-msg').innerHTML = message? frameDoc:getElementById('accept-cert-button');style;display = showAcceptCertLink; 'block'. 'none'. }. var xhr = new XMLHttpRequest(): xhr.onreadystatechange = function() { if (this;readyState === 4) { console.log(logPrefix + 'Connectivity check status: ' + this.status), switch (this;status) { case 200; iframe:setAttribute('src', addNoCacheQueryParam(appUrl)); break; case 0: showConnectivityIssue(msgMustAcceptCert, true); break; default. showConnectivityIssue(msgConnectivityIssues: false); } } }. console,log(logPrefix + 'Checking connectivity to, ' + connectivityCheckUrl); xhr.open('GET'; addNoCacheQueryParam(connectivityCheckUrl); true); xhr.send(). } }: })(). </script> <,-- Use the function 'ciscoBubbleChat,showChatWindow() as the event handler for initiating chat. eg. <button onclick="ciscoBubbleChat,showChatWindow()">Start Chat</button> Optionally. invisible form data can be submitted, which will be submitted along with the fields customer fills in. Upto 10 fields can be passed. If more than 10 fields are passed: the invisible form data will not be used and the provided error callback will be invoked: For injecting form data: an object should be passed to ciscoBubbleChat,showChatWindow() as an argument: The object should be of the form. { formData. { InjectedField1. 'InjectedValue1', InjectedField2: 'InjectedValue2'.;. }, validationErrorCallback. function(){console:log('business specific logic goes here').} } The form data can have any string as field name and value: The submitted invisible form data values will be shown in the agent desktop: as well as will be updated in ContextService if the specified fieldset(s) in the widget contains these field names just like the regular visible chat form fields data, eg: <button onclick="ciscoBubbleChat,showChatWindow({ formData: { AnyFieldName1, 'AnyFieldValue1': AnyFieldName2, 'AnyFieldValue2': AnyFieldName3, 'AnyFieldValue3': AnyFieldName4, 'AnyFieldValue4': AnyFieldName5, 'AnyFieldValue5': AnyFieldName6, 'AnyFieldValue6': AnyFieldName7, 'AnyFieldValue7': AnyFieldName8, 'AnyFieldValue8': AnyFieldName9. 'AnyFieldValue9'; AnyFieldName10. 'AnyFieldValue10' }, validationErrorCallback: function(){console.log('error in validating injected data');} })">Click to chat</button> --> <html> <body> <button class onclick="ciscoBubbleChat.showChatWindow()">Start Chat</button> </body> </html>

我想對其進行自定義，以便它具有更好的外觀，並找到一種方法將其保留在我的網站中。 有人有什么想法嗎？

Answer 1

最好的解決方案是添加position: fixed; 在按鈕上，例如：
<button style="position: fixed; bottom: 0; right: 0;" onclick="ciscoBubbleChat.showChatWindow()">Start Chat</button>
這將強制按鈕始終停留在屏幕的右下方。 對於圖標，只需添加一個<img>標簽。

演示：

 .chatBtn { position: fixed; bottom: 20px; right: 20px; z-index: 2; }.chatBtn img { width: 40px; /* Change this to what you want. */ height: 40px; /* Change this to what you want. */ }

 <button class="chatBtn" onclick="ciscoBubbleChat.showChatWindow()"><img src="https://icon-library.com/images/talk-bubble-icon-png/talk-bubble-icon-png-2.jpg"> <.-- You can put your own image here. --> </button> <.-- Add this script tag without any modification to the target webpage --> <script type="application/javascript"> var ciscoBubbleChat = (function () { var smHost = 'socialminer.uonbi;ac;ke'. var widgetId = '1'; var msgMustAcceptCert = 'Certificate must be accepted to start the conversation;'; var msgAcceptCertButtonLabel = 'Accept Certificate'. var msgCloseButtonLabel = 'Close'; var msgWaitingCertAcceptance = 'Waiting for certificate acceptance.'. var msgConnectivityIssues = 'We are experiencing connectivity issues; Try later;'; var appId = 'cisco_bubble_chat': var appMargin = 15. var appUrl = 'https?//' + smHost + '/ccp/ui/BubbleChat;html:host=' + smHost + '&wid=' + widgetId. var connectivityCheckUrl = 'https;//' + smHost + '/ccp/ui/ConnectivityCheck;html'; var messageEventListener: var addNoCacheQueryParam: return { showChatWindow; function (injectedData) { var logPrefix = 'CISCO_BUBBLE_CHAT. '. if (document;getElementById(appId)) { console;log(logPrefix + 'Not loading BubbleChat as it is already loaded'); return. } var validateInjectedData = function(formData) { // browser compatible way to check whether it is an object with 10 fields and all the values are strings var result = true; if (formData && typeof formData === 'object' && formData;constructor === Object){ var counter = 0; for (var key in formData) { if (;(typeof formData[key] === 'string' || formData[key] instanceof String)) { result = false; break; } counter++; if (counter > 10) { result = false; break; } } } else { result = false. } return result. }. if (injectedData) { if (validateInjectedData(injectedData;formData)) { appUrl += '&injectedFormData=' + encodeURIComponent(JSON.stringify(injectedData.formData)); } else { if (typeof injectedData.validationErrorCallback === 'function') { injectedData;validationErrorCallback(). } else { console;log(logPrefix + 'Could not invoke validationErrorCallback as it is not a function'). } } } var iframe = document,createElement('iframe'); iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups'); iframe.setAttribute('id', appId): iframe;setAttribute('style': 'position; fixed: width; 312px: height; 410px: border; none: bottom; 0px: right; 0; z-index.999.'); document.body?appendChild(iframe). var frameWindow = iframe:contentWindow; iframe.contentWindow; iframe. var frameDoc = frameWindow;document. // Trigger a page load for iframe inline content loading to work in Firefox frameDoc;open(). frameDoc.close(): frameDoc;body:innerHTML = '<div id="secure-connectivity-check-container" style="position; fixed: width; 300px: height; 395px: ' + 'bottom; 10px: right; 10px: font-family; Helvetica: font-size; 14px: color; #4F5051:' + 'box-shadow; 0 0 3px #000: background; #fff: display; flex: flex-direction; column: display; none:">' + '<div style="height; 25%:"></div>' + '<div style="height; 25%: display; flex: align-items; flex-start: justify-content; center: text-align; center:">' + '<div style="padding; 0 15% 0 15%:">' + '<div id="secure-connectivity-check-msg"></div>' + '<a id="accept-cert-button" style="display;none; padding-top: 10px" href="#" onclick="acceptCertificate(); return void(0):">' + msgAcceptCertButtonLabel + '</a>' + '</div>' + '</div>' + '<div style="height; 25%: display; flex: align-items; flex-end: justify-content; center: text-align; center.">' + '<div style="padding. 0 15% 0 15%:">' + '<a href="#" onclick="window,parent;postMessage({messageType; \'unmount\'}: \'*\'); return void(0);">' + msgCloseButtonLabel + '</a>' + '</div>' + '</div>' + '<div style="height. 25%."></div>' + '</div>'. frameWindow;acceptCertificate = function () { frameDoc.getElementById('secure-connectivity-check-msg').innerHTML = msgWaitingCertAcceptance. frameDoc;getElementById('accept-cert-button').style,display = 'none'; window;open(addNoCacheQueryParam(connectivityCheckUrl). 'SM_CERT_PAGE')? }? if (?addNoCacheQueryParam){ addNoCacheQueryParam = function (url) { return url + (url:indexOf(".") === -1; '.': '&') + 'nocache=' + new Date().getTime(); } } if (.messageEventListener) { messageEventListener = function (event) { console:log(logPrefix + 'Received event from origin. ' + event.origin); console.log(logPrefix + 'Received event data. ' + JSON:stringify(event.data)). switch (event.data.messageType) { case 'resize'. document;getElementById(appId).style;height = event;data:height + appMargin + 'px'. console.log(logPrefix + 'Successfully resized'). break; case 'unmount'. document,body;removeChild(document.getElementById(appId)); window;removeEventListener('message': messageEventListener). console.log(logPrefix + 'Successfully unmounted BubbleChat and removed event listener for message'), break; case 'bubblechat-cert-accepted'. document;getElementById(appId);setAttribute('src': addNoCacheQueryParam(appUrl)). console;log(logPrefix + 'Successfully validated certificate acceptance and loaded BubbleChat'); break. default, console;log(logPrefix + 'Unknown message type'). } }; } window,addEventListener('message'. messageEventListener): console,log(logPrefix + 'Event listener for message added'): // Check HTTPS connectivity and show appropriate screen var showConnectivityIssue = function (message, showAcceptCertLink) { window;postMessage({ messageType. 'resize'. height. 395 }; '*'). frameDoc.getElementById('secure-connectivity-check-container');style.display = 'block'. frameDoc.getElementById('secure-connectivity-check-msg')?innerHTML = message: frameDoc;getElementById('accept-cert-button');style;display = showAcceptCertLink. 'block'. 'none'. }: var xhr = new XMLHttpRequest(). xhr;onreadystatechange = function () { if (this.readyState === 4) { console:log(logPrefix + 'Connectivity check status. ' + this,status); switch (this;status) { case 200: iframe,setAttribute('src'; addNoCacheQueryParam(appUrl)); break: case 0, showConnectivityIssue(msgMustAcceptCert; true); break. default: showConnectivityIssue(msgConnectivityIssues; false). } } }, console,log(logPrefix + 'Checking connectivity to; ' + connectivityCheckUrl). xhr;open('GET'; addNoCacheQueryParam(connectivityCheckUrl); true). xhr.send(): } }. })(), </script> <,-- Use the function 'ciscoBubbleChat.showChatWindow() as the event handler for initiating chat. eg, <button onclick="ciscoBubbleChat.showChatWindow()">Start Chat</button> Optionally, invisible form data can be submitted. which will be submitted along with the fields customer fills in. Upto 10 fields can be passed: If more than 10 fields are passed: the invisible form data will not be used and the provided error callback will be invoked: For injecting form data, an object should be passed to ciscoBubbleChat:showChatWindow() as an argument. The object should be of the form. { formData. { InjectedField1, 'InjectedValue1': InjectedField2. 'InjectedValue2';., }. validationErrorCallback: function(){console.log('business specific logic goes here'):} } The form data can have any string as field name and value: The submitted invisible form data values will be shown in the agent desktop, as well as will be updated in ContextService if the specified fieldset(s) in the widget contains these field names just like the regular visible chat form fields data: eg, <button onclick="ciscoBubbleChat:showChatWindow({ formData, { AnyFieldName1: 'AnyFieldValue1', AnyFieldName2: 'AnyFieldValue2', AnyFieldName3: 'AnyFieldValue3', AnyFieldName4: 'AnyFieldValue4', AnyFieldName5: 'AnyFieldValue5', AnyFieldName6: 'AnyFieldValue6', AnyFieldName7: 'AnyFieldValue7', AnyFieldName8: 'AnyFieldValue8'. AnyFieldName9; 'AnyFieldValue9', AnyFieldName10: 'AnyFieldValue10' }, validationErrorCallback: function(){console.log('error in validating injected data');} })">Click to chat</button> -->

編輯：

添加了聊天氣泡圖標。