Website chatbot mit digitalflow AI erstellen

In diesem Blogeintrag zeigen wir wie sich ein einfacher Webseiten chatbot erstellen lässt. Durch Training und hinterlegen von Vorlagen kann der Bot auf die eigenen Bedürfnisse angepasst werden.

Test URL: https://eltronix.ch/bot_blog_example.php

Bot einrichten

1) Anmeldung auf https://dialogflow.com/ druchführen

2) neuen Agent anlegen

wir wählen die Sprache Deutsch

3) Der Bot ist nun bereits einsatzfähig und Antwortet entsprechend der "Default Welcome Intent"

4) Nun bringen wir dem Bot bei auf die Benutzereingabe "Guten Morgen" zu Antworten

5) im Bereich "Intents" wählen wir den "Default Welcome Intent" aus

6) unter "Training phrases" können die Benutzereingaben definiert werden, wir erstellen einen neuen Eintrag "Guten Morgen"

7) im Bereich "Responses" wird definiert welche Antwort der Bot uns auf die Benutzereingaben ausgibt

9) Der Bot kann jederzeit via "Try it now" auf der rechten Seite getestet werden

8) Unter "Intents" => "CREATE INTENT" können beliebige neue Szenarien mit den entsprechenden Fragen und Antworten definiert werden

Einbinden via Iframe

Der Bot kann direkt via Iframe auf einer bestehenden Webseite eingebunden werden.

1) Wir wechseln in den Bereich "Integrations" und aktivieren das "Web Demo"

2) Das "Web Demo" beinhaltet direkt den iframe code:

<iframe
    allow="microphone;"
    width="350"
    height="430"
    src="https://console.dialogflow.com/api-client/demo/embedded/XXXXXXXXXXXX">
</iframe>

Einbinden via API

Für das dynamische anpassen verwenden wir die API, somit können wir die Darstellung und Funktion nach unseren Wünschen anpassen.

<html>
<head>
	<title>API Example</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript">
		var accessToken = "XXXXXX";
		var baseUrl = "https://api.api.ai/v1/";
		$(document).ready(function() {
			$("#input").keypress(function(event) {
				if (event.which == 13) {
					event.preventDefault();
					send();
				}
			});
			$("#send").click(function(event) {
					send();
			});
		});
	
		function setInput(text) {
			$("#input").val(text);
			send();
		}
		function send() {
			
			var text = $("#input").val();
			$("#text_response").append('<div class="humanInput"><br><b>Human:</b><div class="triangle-border blue left">'+text+'</div></div>');
			var text_response = $("#text_response").val();
			$.ajax({
				type: "POST",
				url: baseUrl + "query?v=20150910",
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				headers: {
					"Authorization": "Bearer " + accessToken
				},
				data: JSON.stringify({ query: text, lang: "en", sessionId: "somerandomthing" }),
				success: function(data) {
					setResponse(JSON.stringify(data, undefined, 2));
				},
				error: function() {
					setResponse("Internal Server Error");
				}
			});
			setResponse("Loading...");
		}
		function setResponse(val) {
			$("#response").text(val);
			if(val != "Loading...")
			{
				var parsedData = JSON.parse(val);
				var outputText = parsedData.result.fulfillment.speech;
				if(outputText == '')
				{
					outputText = 'ich verstehe dich nicht';
					scrollDown();
					}
				$("#text_response").append('<div class="bot_input" style="padding-left:20px;"><br><b>Bot response:</b><div class="triangle-border green right">'+outputText+'</div></div>');
				scrollDown();
				}
		}

		function scrollDown(){
			var objDiv = document.getElementById("text_response");
			objDiv.scrollTop = objDiv.scrollHeight;
			}
	</script>
</head>
<style>
		body { width: 500px; margin: 0 auto; text-align: left; margin-top: 20px; }
		input { width: 400px; }
		button { width: 50px; }
		textarea { width: 100%; }
		.human_input{position:relative;}
</style>
<body>
<h1>Eltronix ChatBot</h1>

	<div>
		<input id="input" type="text"> <button id="send">Speak</button>
		<div style=" float:left;"><br>Natural<br> <div id="text_response" style="border: 1px solid #000;width: 500px;overflow: scroll;height: 500px;"></div></div>
		<div><br>Response<br> <textarea id="response" cols="40" rows="20" style="float:right;"></textarea></div>
		
	</div>
</body>
</html>

Test URL: https://eltronix.ch/bot_blog_example.php