如何在我的网站上添加气泡聊天图标？

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> -->

编辑：

添加了聊天气泡图标。