Betten Sie ein Virtual Agent Chat-Widget auf einer externen Webseite (veraltete Methode)

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 5 Minuten Lesedauer

    • Laden Sie Virtual Agent Chat-Widget-Schnittstelle auf einer externen Webseite mithilfe eines Inline-Frame-Elements (iFrame). Sie können optional auch den SSO-Authentifizierungsprozess (Single Sign-on) aktivieren, der automatisch für Gastanwender ausgeführt wird, die das Chat-Widget verwenden und nicht angemeldet sind.

    Vorbereitungen

    Wichtig:
    Erwägen Sie das Hinzufügen des tragbaren Geräts Virtual Agent Stattdessen Webclient zu Ihrer Webseite. Es reduziert die Codekomplexität und ist einfacher zu implementieren. Es enthält auch Standard-Chatfunktionen, z. B. Klickaktionen zum Starten oder Schließen des Chats. Details finden Sie unter Fügen Sie das tragbare Element hinzu Virtual Agent Chat-Widget zu einer Drittpartei-Website.
    • Im iFrame geben Sie die URL der Instanz an, die eingebettet werden soll. Wenn Sie das Chat-Widget auf eine Seite einbetten, die sich nicht in befindet ServiceNow Instanz, die URL muss eine anwenderdefinierte Instanz-URL sein. Aufgrund der erhöhten Browsersicherheit kann das Chat-Widget möglicherweise nicht geladen werden, wenn Sie keine anwenderdefinierte URL verwenden. Weitere Informationen zur Verwendung anwenderdefinierter URLs finden Sie unter Zuordnen anwenderdefinierter URLs zu Ihrer Instanz .
      Gehen Sie wie folgt vor, um eine anwenderdefinierte URL zu verwenden:
      Hinweis:
      Die Virtual Agent Chat-Widget funktioniert standardmäßig nicht über einen iFrame in Safari. Apple Blockiert ursprungsübergreifende iFrames (wenn die Domäne der im iframe verwendeten URL nicht mit der Domäne der Website selbst übereinstimmt).

    • Nachdem Sie den Virtual Agent-Client eingebettet haben, können Sie optional SSO-Authentifizierung über das Chat-Widget auslösen, aber nur, wenn Ihre Instanz für die Verwendung eines externen SSO-Providers eingerichtet ist. Außerdem muss die Host Website denselben SSO-Provider wie Ihre Instanz verwenden. Weitere Informationen zum Festlegen von SSO-Anbietern finden Sie unter Externes Single Sign-on (SSO) .

      Um die SSO-Authentifizierung auszulösen, erstellen Sie ein JavaScript-Skript, das Bedingungen für die Ausführung der Authentifizierung definiert und Anwender zu einer von Ihnen angegebenen Chat-Widget-Seite umleitet (siehe Schritt 2 unten). Sie geben auch die zulässigen URLs an, die in diesem Skript übergeben werden können, indem Sie sie in identifizieren com.glide.cs.web_client_login_redirect_urlsSystemeigenschaft. Geben Sie die vollständigen Umleitungs-URLs oder den Hostteil der URL an, z. B. https://example.com .

    Erforderliche Rolle: Administrator

    Warum und wann dieser Vorgang ausgeführt wird

    Dieses Verfahren erfordert, dass Sie Werte für die folgenden beiden Systemeigenschaften festlegen:
    • com.glide.cs.embed.csp_frame_ancestors
    • com.glide.cs.embed.xframe_options
    Diese Eigenschaften bestimmen die Sicherheitsrichtlinie für das eingebettete Chat-Widget, d. h. wie Browser HTML-Inhalte für rendern und sichern Virtual Agent Und Servicemitarbeiter Chat in einem iFrame, bevor Sie den Webchat-Client einbetten.
    Um SSO-Authentifizierung für Ihre Gastanwender zu generieren, können Sie ein Skript erstellen, das verwendet Fenster.PostNachricht() Methode (Web-API), um die Authentifizierung auszulösen und die URL anzugeben, an die Anwender nach der Authentifizierung weitergeleitet werden. Weitere Informationen zu dieser Methode und zu Windows-Objekten finden Sie unter Window.postMessage().
    Hinweis:
    Wenn Sie die Anwendung Content Management System (CMS) verwenden, um anwenderdefinierte Schnittstellen für zu erstellen ServiceNow AI Platform Und ServiceNow® Anwendungen. Beachten Sie, dass dies nicht unterstützt wird Virtual Agent.

    Prozedur

    1. Legen Sie beide fest com.glide.cs.embed.csp_frame_ancestorsUnd com.glide.cs.embed.xframe_optionsSystemeigenschaften zur Angabe der HTTP-Headeranweisungen zum Sichern der iFrame-Inhalte.
      Die HTTP-Headeranweisungen sagen dem Browser, ob eine Seite in bestimmte Domänen eingebettet werden kann, um Klickjacking-Versuche zu vermeiden. Durch das Festlegen beider Eigenschaften wird sichergestellt, dass Sicherheitsrichtlinien für wichtige Browser und auch ältere Browser wie Internet Explorer vorhanden sind.
      1. Geben Sie im Navigationsfilter sys_properties.list ein.
      2. Suchen Sie in der Tabelle „Systemeigenschaft“ [sys_properties] nach com.glide.cs.embed.csp_frame_ancestorsEigenschaft nach Name.
        Hinweis:
        Diese Eigenschaft legt den Quellwert der HTTP-Headeranweisung fest: Content-Security-Policy:Frame-ancestors <source>. Verwenden Sie Hostquelle Wert zur Angabe der Domänen, in die die externe Webseite eingebettet werden kann. Diese Eigenschaft gilt für die meisten wichtigen Browser, mit Ausnahme von Internet Explorer.
      3. Klicken Sie auf den Eigenschaftsnamen, um das Formular zu öffnen und die Anweisungswerte anzugeben.
        Tabelle : 1. Systemeigenschaft: Com.Glide.cs.embed.csp_Frame_ancestors
        Feld Beschreibung
        Typ Zeichenfolge

        Dies ist der Standardwert.
        Wert Geben Sie eine oder mehrere Quellen an, einschließlich:
        • „Selbst“ : Gibt an, dass der Ursprung mit der Seite identisch ist, die bedient wird. Beispiel: Wenn der Wert ist 'self' http://mywebsite.com, Dann wird der iFrame in die übergeordnete Domäne sowie in mywebsite.com eingebettet. Dies ist der Standardwert.
        • Hostquelle : Die Domänen, in die die externe Webseite eingebettet werden kann. Geben Sie die Internet-Host-Site anhand des Namens, der IP-Adresse oder der optionalen URL und/oder Portnummer an. Die Site-Adresse kann mit einem Platzhalterzeichen (Sternchen) beginnen. Beispielwert: http://*.example.com
        • Schemaquelle : Ein Schema. Beispiel: http: Oder https:
        • Keine : Keine übereinstimmenden URLs.

        Weitere Informationen zu Quellwerten, die Sie angeben können, finden Sie unter CSP:Frame-ancestors Und Sicherheitsrichtlinie für eingebettete Client-Inhalte für Virtual Agent (Instanzsicherheitshärtung) In Hardening settings.

      4. Kehren Sie zur Tabelle „Systemeigenschaft“ [sys_properties] zurück, um nach zu suchen com.glide.cs.embed.xframe_optionsEigenschaft nach Name.
        Hinweis:
        Diese Eigenschaft legt den Wert der Headeranweisung „X-Frame-Options“ fest, um anzugeben, ob der Browser eine externe Webseite in einem Frame rendern kann. Verwenden Sie den Standard Sameursprung Wert zur Angabe der Domänen, in die die externe Webseite eingebettet werden kann. Diese Eigenschaft gilt für ältere Browser, z. B. Internet Explorer 11.
      5. Klicken Sie auf den Eigenschaftsnamen, um das Formular zu öffnen und die Anweisungswerte anzugeben.
        Tabelle : 2. Systemeigenschaft: Com.Glide.cs.embed.xframe_options
        Feld Beschreibung
        Typ Zeichenfolge. Standardwert.
        Wert Geben Sie einen Wert an, einschließlich:
        • Sameursprung . Standardwert. Zeigt die Seite in einem Frame an, der denselben Ursprung hat wie die Seite selbst. Beispielwert: Zulassen ab https://example.com.
        • Ablehnen . Zeigt die Seite nicht in einem Frame an.
        • Von URI zulassen . Zeigt die Seite nur in einem Frame am angegebenen Ursprung an.
          Hinweis:
          Dieser Wert funktioniert in modernen Browsern nicht mehr.

        Weitere Informationen zu Quellwerten, die Sie angeben können, finden Sie unter X-Frame-Optionen Und Set Xframe options to prevent embedding third-party websites [Updated in Security Center 1.3] In Hardening settings.

    2. Nachdem Sie Ihre ServiceNow-Instanz einer anwenderdefinierten URL zugeordnet haben, erstellen Sie das iFrame-Element, und geben Sie die anwenderdefinierte URL im Inline-Element (iframe) an, das zum Einbetten von verwendet wird Virtual Agent Client auf einer externen Webseite: „https://<your-domain>.com/sn_va_Web_Client_App_embed.do“
      Hinweis:
      Ihre Instanz kann mehrere anwenderdefinierte URLs haben, aber nur eine Instanz-URL. Sie dürfen nur Ihre anwenderdefinierte Instanz-URL verwenden.
      Zum Beispiel:
      <iframe id="sn_va_web_client"     title="ServiceNow Virtual Agent Client"     width="600"     height="900"     src="https://<your-domain>.com/sn_va_web_client_app_embed.do">
"https://<your-domain>.com/"https://<your-domain>.com/</iframe>
      Hinweis:
      Geben Sie den Parameter ?sysparm_skip_load_history=true am Ende der URL an, um die Schnittstelle ohne Konversationsverlauf zu laden.
    3. Wahlweise: Erstellen Sie ein JavaScript-Skript, das verwendet Fenster.PostNachricht() Methode (Web-API) zum Definieren von Ereignisbedingungen, die die SSO-Authentifizierung auf einer Anwenderoberflächenseite auslösen und Anwender zu einer von Ihnen angegebenen Chat-Widget-Seite zurückgeben.
      Verwenden Sie diese Zeichenfolge, um Anwender zu einer Chat-Widget-Seite umzuleiten: „https://<your-instance>.service-now.com/sn_va_web_client_login.do?sysparm_redirect_uri=’ + encodeURIComponent(<your-page>)
      Hinweis:
      Bevor Sie das Skript ausführen, verwenden Sie com.glide.cs.web_client_login_redirect_urlsSystemeigenschaft zur Angabe der URLs, die im Skript übergeben werden können. Die Umleitung funktioniert nur, wenn Sie eine oder mehrere zulässige URLs im Eigenschaftswert angeben. Geben Sie die vollständigen Umleitungs-URLs oder den Hostteil der URL an, z. B. https://example.com .
      Beispielskript:
      <script>
    window.addEventListener("message", function(e) {
       // redirect to SSO login if the chat widget logs in but is logged in as a guest user(unauthenticated)
      if(e.data.type==="SESSION_CREATED" && e.data.authenticated === false)
        window.location.href = "https://<your-instance>.service-now.com/sn_va_web_client_login.do?sysparm_redirect_uri="+ encodeURIComponent(location.href);
      
      // redirect to SSO login if the ServiceNow platform logs out from underneath the chat widget
      if(e.data.type==="SESSION_LOGGED_OUT")
        window.location.href = "https://<your-instance>service-now.com/sn_va_web_client_login.do?sysparm_redirect_uri=" + encodeURIComponent(location.href);
    });
  </script>

      In diesem Beispiel wird die Authentifizierung in der angegebenen Instanz ausgelöst, wenn die Ereignisse SESSION_CREATED oder SESSION_LOGGED_OUT auftreten. Nach der Authentifizierung (wenn die SSO-Anmeldeinformationen für Anwender akzeptiert werden) werden Anwender zur Seite „eingebettetes Chat-Widget“ weitergeleitet, die Sie in angegeben haben sn_va-Web_Client_login.do?sysparm_redirect_URI=„ + encodeURIComponent(<your-page>) , Solange Sie auch die Seiten-URL im angegeben haben com.glide.cs.web_client_login_redirect_urlsEigenschaft.