Integration mit Eingabefeld

In diesem Beitrag zeigen wir Ihnen, wie Sie aiaibot mit einem Eingabefeld Ihrer Website integrieren können.

Ziel

Manchmal möchten wir den Chatbot in ein Eingabefeld auf der Website integrieren, beispielsweise in die Suchleiste der Website oder in einem Textfeld in einem Abschnitt auf der Homepage mit dem Titel „Haben Sie weitere Fragen? Unser KI-gestützter Chatbot kann Ihnen helfen“, sodass nach der Übermittlung des Eingabeinhalts der aiaibot-Webchat ausgelöst wird und die Benutzereingabe als Frage an den Chatbot gestellt wird.

Ein Live-Beispiel finden Sie auf der Startseite unserer offiziellen Website.

Übersicht

Für die Integration sind folgende Schritte erforderlich:

aiaibot wie gewohnt integrieren
Eingabefeld vorbereiten
Eingabefeld mit aiaibot verbinden

Im Folgenden gehen wir Schritt für Schritt auf die Details ein.

Integrieren Sie aiaibot wie gewohnt

Eine der einfachsten Möglichkeiten, aiaibot in Ihre Website zu integrieren, besteht darin, den folgenden HTML-Code in Ihre Webseite einzufügen:

<script
  type="text/javascript"
  src="https://chat.aiaibot.com/bootstrap.js"
  data-aiaibot-key="%YOUR_AIAIBOT_KEY%"
  defer
></script>

Weitere Informationen finden Sie in den Anweisungen in unserem Hilfecenter-Dokument.

Eingabefeld vorbereiten

Das Eingabefeld kann ein <textarea> oder eine <input type="text"> auf Ihrer Website sein. Stellen Sie sicher, dass das Eingabefeld einen Selektor enthält, damit Sie mit document.querySelector() einfach auf Ihr DOM verweisen können.

Eingabefeld mit aiaibot verknüpfen

Nachdem die Webseite geladen und aiaibot in die Website integriert wurde, gehen wir wie folgt vor:

Abfrage des DOM des Eingabefelds.
Wenn aiaibot den Ladevorgang abgeschlossen hat, registrieren wir einen Callback für aiaibot. Sobald eine Benutzereingabenachricht eingeht, wird die gespeicherte Benutzereingabe als aiaibot-Eingabe gesendet.
Beim Senden der Benutzereingabe speichern wir die Benutzereingabe in einer Variable und lösen dann aiaibot aus.

Beispielcode:

let messageToSend = '';

const textInput = wrapperElement.querySelector('[data-id="aiaibot-webchat-trigger__text-input"]');

aiaibot.onReady(() => {
  aiaibot.onMessage((payload) => {
    if (messageToSend === '') {
      return;
    }

    if (payload.type !== 'user-input') { // This could also be 'button-group', depends on which widget you are using
      return;
    }

    aiaibot.sendUserInput(payload.id, messageToSend);

    messageToSend = '';
  });
});

textInput.addEventListener('keydown', (event) => {
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault();

    messageToSend = textInput.value.trim();

    // Trigger aiaibot. For more information, see:
    // https://help.aiaibot.com/chatbot/stories-and-story-builder/trigger
    document.dispatchEvent(new CustomEvent('question'));
  }
});

In diesem Fall wird nach dem Drücken der Eingabetaste im Eingabefeld ein benutzerdefiniertes Ereignis ausgelöst und das Öffnen von aiaibot ausgelöst. Sobald das Benutzereingabe-Widget beginnt, dem Benutzer eine Frage zu stellen, wird die in der Variable „messageToSend“ gespeicherte Benutzereingabe an aiaibot gesendet.

Ein vollständiges Beispiel

<script
  type="text/javascript"
  src="https://chat.aiaibot.com/bootstrap.js"
  data-aiaibot-key="%YOUR_AIAIBOT_KEY%"
  defer
></script>

<script tyep="text/javascript">
;(() => {
  class AiaibotWebchatTrigger extends HTMLElement {
    constructor() {
      super();

      this.elementStyle = `
        %YOUR_STYLES%
        /* Z.B. .aiaibot-webchat-trigger { ... } */
      `;

      this.elementHtml = `
        <div class="aiaibot-webchat-trigger">
          <div class="aiaibot-webchat-trigger__container">

            <h3 class="aiaibot-webchat-trigger__title">
              Hast du noch Fragen?<br>
              Unser Chatbot hilft dir!
            </h3>

            <div class="aiaibot-webchat-trigger__input-container">

              <textarea
                class="aiaibot-webchat-trigger__text-input"
                data-id="aiaibot-webchat-trigger__text-input"
                placeholder="Stellen Sie hier ein Frage."
              ></textarea>

              <button
                class="aiaibot-webchat-trigger__send-button"
                data-id="aiaibot-webchat-trigger__send-button"
              >
                Senden
              </button>

            </div>

            <ul class="aiaibot-webchat-trigger__button-group">
              <li>
                <button
                  class="aiaibot-webchat-trigger__text-button"
                  data-id="aiaibot-webchat-trigger__text-button"
                >
                  Wer bist du?
                </button>
              </li>
              <li>
                <button
                  class="aiaibot-webchat-trigger__text-button"
                  data-id="aiaibot-webchat-trigger__text-button"
                >
                  Was kannst du machen?
                </button>
              </li>
              <li>
                <button
                  class="aiaibot-webchat-trigger__text-button"
                  data-id="aiaibot-webchat-trigger__text-button"
                >
                  Was macht aiaibot?
                </button>
              </li>
            </ul>

          </div>
        </div>
      `;
    }

    connectedCallback() {
      const shadow = this.attachShadow({ mode: 'open' });

      const styleElement = document.createElement('style');
      styleElement.textContent = this.elementStyle;

      const wrapperElement = new DOMParser().parseFromString(this.elementHtml, 'text/html').firstChild;

      shadow.appendChild(styleElement);
      shadow.appendChild(wrapperElement);

      const textInput = wrapperElement.querySelector('[data-id="aiaibot-webchat-trigger__text-input"]');
      const sendButton = wrapperElement.querySelector('[data-id="aiaibot-webchat-trigger__send-button"]');
      const textButtons = wrapperElement.querySelectorAll('[data-id="aiaibot-webchat-trigger__text-button"]');

      let messageToSend = '';

      sendButton.addEventListener('click', () => {
        sendMessage();
      });

      textInput.addEventListener('keydown', (event) => {
        if (event.key === 'Enter' && !event.shiftKey) {
          event.preventDefault();
          sendMessage();
        }
      });

      textButtons.forEach((textButton) => {
        textButton.addEventListener('click', (event) => {
          const text = event.target.textContent;
          textInput.value = text.trim();

          setTimeout(() => {
            sendMessage();
          }, 500);
        });
      });

      aiaibot.onReady(() => {
        aiaibot.onMessage((payload) => {
          if (messageToSend === '') {
            return;
          }
          if (payload.type !== 'user-input') {
            return;
          }
          aiaibot.sendUserInput(payload.id, messageToSend);
          messageToSend = '';
        })
      });

      function sendMessage() {
        const message = textInput.value.trim();
        if (!message) {
          return;
        }

        messageToSend = message;

        // Trigger aiaibot
        document.dispatchEvent(new CustomEvent('question'));
      }
    }
  }

  customElements.define("aiaibot-webchat-trigger", AiaibotWebchatTrigger);
})();
</script>

<aiaibot-webchat-trigger></aiaibot-webchat-trigger>

Hinweise:

Bitte verwenden Sie Ihren eigenen aiaibot-Schlüssel, um %YOUR_AIAIBOT_KEY% zu ersetzen.
Bitte schreiben Sie Ihren eigenen CSS-Code, um %YOUR_STYLE% zu ersetzen.
Der oben gezeigte Code verwendet Shadow DOM und Custom Element in Web Components. Dies ist die empfohlene Methode zur Integration von aiaibot, da Shadow DOM die Stile isoliert, sodass die aiaibot-bezogenen Elemente nicht von den vorhandenen Stilen auf der Webseite beeinflusst werden.
Das Beispiel verwendet ein Textfeld für die Eingabe und reagiert auf das Event der Eingabetaste und das Click-Event auf der Schaltfläche „Senden“, um aiaibot WebChat auszulösen.
Darüber hinaus werden drei zusätzliche Schaltflächen verwendet, um vordefinierte Fragen automatisch zu senden. Sie können den Text auf den Schaltflächen ändern, um die Frage anzupassen.