Such-Widget auf einer Webseite einfügen

Auf dieser Seite wird beschrieben, wie Sie einer Website mithilfe des Such-Widgets eine Suchfunktion hinzufügen.

Hinweis

Bevor Sie Ihrer Webseite ein Such-Widget hinzufügen, müssen Sie es konfigurieren. Beginnen Sie mit Ergebnisse für das Such Widget konfigurieren. Das Styling des Such-Widgets auf Ihrer Webseite kann nicht angepasst werden.

Prozeduren

Die Vorgehensweise zum Hinzufügen des Such-Widgets zu Ihrer Webseite hängt vom ausgewählten Autorisierungstyp ab:

• Autorisierungstoken: Das Widget verwendet ein von Ihrer Codebasis bereitgestelltes JWT- oder OAuth-Token. Sie benötigen einen eigenen Server, mit dem Sie ein Token generieren können. Das Authentifizierungstoken wird verwendet, um einen API-Aufruf im Namen des Nutzers oder Dienstkontos auszuführen. Verwenden Sie beim Generieren des Authentifizierungstokens den OAuth-Bereich https://www.googleapis.com/auth/cloud-platform.

  • Für Server-zu-Server-Interaktionen mit Dienstkonten: Weitere Informationen finden Sie in der Autorisierungsdokumentation unter OAuth 2.0 für Server-zu-Server Anwendungen verwenden.

  • Für JavaScript-Webanwendungen: Weitere Informationen finden Sie in der Autorisierungsdokumentation unter OAuth 2.0 für clientseitige Web Anwendungen.

  Hinweis: Wenn Sie einen Personalpool ausgewählt haben, um den Zugriff auf die Daten Ihrer App zu steuern, rufen Sie kurzlebige Tokens für die Workforce Identity Föderation ab.

• Öffentlicher Zugriff: Das Widget schränkt nicht ein, wer Ergebnisse aus einer Suchanfrage erhalten kann.

Widget hinzufügen, das ein Autorisierungstoken verwendet

1. Rufen Sie in der Google Cloud Console die Seite KI-Anwendungen auf.

   KI-Anwendungen

2. Klicken Sie auf den Namen der App, die Sie bearbeiten möchten.

3. Klicken Sie auf Integration.

4. Klicken Sie auf den Tab Widget.

5. Wählen Sie als Widget-Autorisierungstyp JWT- oder OAuth-basiert aus.

6. Geben Sie den Domainnamen für die Widget-Seite an:

   1. Geben Sie den Domainnamen für die Seite ein, auf der das Widget angezeigt werden soll.

      Wenn Sie beispielsweise das Widget auf die Seiten example.com/ai.html und cymbal.example.com/search.html kopieren, geben Sie example.com als Domain ein. Wenn das Widget nur auf einer Seite in der Subdomain funktionieren soll, geben Sie cymbal.example.com ein.

      Wenn Sie das Widget auf Ihrem lokalen Host testen möchten, geben Sie localhost ein.

   2. Klicken Sie auf Hinzufügen.

7. Wiederholen Sie Schritt 6 für jede Domain, in der das Widget angezeigt werden soll.

8. Klicken Sie auf Speichern.

9. Kopieren Sie das Code-Snippet im Abschnitt Kopieren Sie den folgenden Code in Ihre Webanwendung.

10. Optional: Nehmen Sie die folgenden Änderungen vor, um das Verhalten des Such-Widgets anzupassen:

    • Wenn die Ergebnisse aus dem Web stattdessen in neuen Tabs geöffnet werden sollen, fügen Sie dem kopierten Code-Snippet Folgendes hinzu. Standardmäßig werden Ergebnisse aus unstrukturierten Dokumenten in neuen Tabs geöffnet, während Ergebnisse aus dem Web auf derselben Seite wie das Widget geöffnet werden.

      anchorsTarget="_blank"
      

      Beispiel: <gen-search-widget configId="..." anchorsTarget="_blank"></gen-search-widget>

    • Wenn Sie den Platzhaltertext in der Suchleiste anpassen möchten, fügen Sie dem kopierten Code-Snippet Folgendes hinzu:

      placeholder="CUSTOM_PLACEHOLDER"
      

      Beispiel: <gen-search-widget configId="..." placeholder="Start your search here"></gen-search-widget>

    • Wenn das Widget immer ohne Trigger angezeigt werden soll, fügen Sie dem kopierten Code-Snippet Folgendes hinzu:

      alwaysOpened
      

      Beispiel: <gen-search-widget alwaysOpened></gen-search-widget>

11. Generieren Sie in der Codebasis ein Autorisierungstoken.

    **Hinweis**: Wenn Sie einen Personalpool ausgewählt haben, um den Zugriff auf die Daten Ihrer App zu steuern, rufen Sie kurzlebige Tokens für die Mitarbeiteridentitätsföderation ab.

12. Um das Autorisierungstoken an Ihr Widget zu übergeben, verwenden Sie das zweite Code-Snippet, "// Set authorization token", im Abschnitt Kopieren Sie den folgenden Code in Ihre Webanwendung und ersetzen Sie den Text <JWT or OAuth token provided by you backend> durch Ihr Autorisierungstoken.

13. Legen Sie regelmäßig ein neues Token fest, indem Sie den vorherigen Schritt wiederholen, bevor das aktuelle Token abläuft.

Widget mit öffentlichem Zugriff hinzufügen

**Hinweis**: Wenn in Ihrer Organisation VPC Service Controls zum Schutz von Daten erforderlich ist, verwenden Sie keinen öffentlichen Zugriff für die Widget-Autorisierung.

1. Rufen Sie in der Google Cloud Console die Seite KI-Anwendungen auf.

   KI-Anwendungen

2. Klicken Sie auf den Namen der App, die Sie bearbeiten möchten.

   Für den öffentlichen Zugriff muss die Such-App mit keinem Datenspeicher unter Zugriffssteuerung verknüpft sein.

3. Klicken Sie auf Integration.

4. Klicken Sie auf den Tab Widget.

5. Wählen Sie als Widget-Autorisierungstyp Öffentlicher Zugriff aus.

6. Geben Sie den Domainnamen für die Widget-Seite an:

   1. Geben Sie den Domainnamen für die Seite ein, auf der das Widget angezeigt werden soll.

      Wenn Sie beispielsweise das Widget auf die Seiten example.com/ai.html und cymbal.example.com/search.html kopieren, geben Sie example.com als Domain ein. Wenn das Widget nur auf Seiten in der Subdomain funktionieren soll, geben Sie cymbal.example.com ein.

      Wenn Sie das Widget auf Ihrem lokalen Host testen möchten, geben Sie localhost ein.

   2. Klicken Sie auf Hinzufügen.

7. Wiederholen Sie Schritt 6 für jede Domain, in der das Widget angezeigt werden soll.

8. Klicken Sie auf Speichern.

9. Kopieren Sie das Code-Snippet im Abschnitt Kopieren Sie den folgenden Code in Ihre Webanwendung.

10. Optional: Nehmen Sie die folgenden Änderungen vor, um das Verhalten des Such-Widgets anzupassen:

    • Wenn die Ergebnisse aus dem Web stattdessen in neuen Tabs geöffnet werden sollen, fügen Sie dem kopierten Code-Snippet Folgendes hinzu. Standardmäßig werden Ergebnisse aus unstrukturierten Dokumenten in neuen Tabs geöffnet, während Ergebnisse aus dem Web auf derselben Seite wie das Widget geöffnet werden.

      anchorsTarget="_blank"
      

      Beispiel: <gen-search-widget configId="..." anchorsTarget="_blank"></gen-search-widget>

    • Wenn Sie den Platzhaltertext in der Suchleiste anpassen möchten, fügen Sie dem kopierten Code-Snippet Folgendes hinzu:

      placeholder="CUSTOM_PLACEHOLDER"
      

      Beispiel: <gen-search-widget configId="..." placeholder="Start your search here"></gen-search-widget>

    • Wenn das Widget immer ohne Trigger angezeigt werden soll, fügen Sie dem kopierten Code-Snippet Folgendes hinzu:

      <gen-search-widget alwaysOpened></gen-search-widget>

11. Fügen Sie Ihrer Webseite das Code-Snippet hinzu.

Beispiel für ein eingebettetes Widget mit öffentlichem Zugriff

Ein Beispiel für ein in eine öffentliche Webseite eingebettetes Such-Widget finden Sie unter „Ausprobieren“.

Das Such-Widget „Ausprobieren“ für die Agent Search

Dieses Such-Widget funktioniert mit der folgenden Konfiguration:

  <gen-search-widget
    configId="123456"
    anchorsTarget="_blank"
    placeholder="Search the Agent Search documentation"
    alwaysOpened>
  </gen-search-widget>