Fügen Sie den tragbaren Webclient Virtual Agent einer Drittanbieter-Website hinzu
Um das Chat-Widget des tragbaren Webclients für Virtual Agent auf Webseiten von Drittanbietern zu verwenden, fügen Sie Ihrer Webseite den erforderlichen Code hinzu.
Vorbereitungen
Konfigurieren Sie den tragbaren Webclient Virtual Agent . bevor Sie die Schritte dieses Themas abschließen.
Weitere Informationen finden Sie im Artikel So betten Sie Virtual Agent in eine externe Website ein auf der Website ServiceNow Community.
Erforderliche Rolle: virtual_agent_admin oder admin
Prozedur
Importieren und instanziieren Sie diese Skriptreferenz für den Seitenheader, um eine ServiceNow -Chatinstanz für den externen Seitenheader zu erstellen:
Hinweis:
Im Skriptreferenzbeispiel bezieht sich „site1.example.com“ auf die URL für Ihre Instanz ServiceNow.
<script type="module" >
import ServiceNowChat from "https://site1.example.com/uxasset/externals/now-requestor-chat-popover-app/index.jsdbx?sysparm_substitute=false";
var chat = new ServiceNowChat({ instance: "https://site1.example.com/", });
</script>
Tipp:
Wenn Ihre Organisation einen anwenderdefinierten Domänennamen verwendet, geben Sie den anwenderdefinierten Domänennamen und nicht den Domänennamen ServiceNow als Instanzeigenschaft ein, um sicherzustellen, dass die Browser-Ergebnisse für mehrere Browser konsistent sind.
- Beispiel mit -Konfiguration
const chat = new ServiceNowChat({ instance: 'https://site1.example.com', context: { skip_load_history: 1 }, branding: { bgColor: '#333', primaryColor: '#000', hoverColor: '#EFEFEF', activeColor: '#AAA', openIcon: 'custom-open.svg', closeIcon: 'custom-close.svg', sizeMultiplier: 1.6 }, offsetX: 50, offsetY: 50, position: 'left', translations: { 'Open dialog': 'Open chat', 'Open Chat. {0} unread message(s)': 'Click to open', 'Close chat.': 'Click to close', }, });- JSON-Konfigurationsschema
{ instance: <string> - url to your instance, must be of the same domain (sub-domain) context: <object> - sys_parm variables to pass into the iframe branding: <object> - branding settings bgColor: <rgb|hex> - can take an rgb tuple, ie: '56,56,56' or a 3 or 6 hex color code, ie: #333 or #efefef. background color of button primaryColor: <rgb|hex> - font color hoverColor: <rgb|hex> - hover background color of button activeColor: <rgb|hex> - click / active background color of button openIcon: <string> - name of the uploaded custom icon in settings closeIcon: <string> - name of the uploaded custom icon in settings offsetX: <integer> - distance in pixels the button moves along the x-axis offsetY: <integer> - distance in pixels the button moves along the y-axis position: <enum: left|right> - position left or right side of screen translations: <object> - contains label mappings for translations or label changes 'Open dialog': <string> - replacement text for accessibility 'Open Chat. {0} unread messages(s)': <string> - replacement text for tooltip 'Close chat.': <string> - replacement text for tooltip }