23. November 2020

Lab Innovationen | Download und Anleitungen zur Implementierung


Hier finden Sie die Anleitung zur Implementierung des Corona Chatbots aus dem Labor KJC Chatbot auf Ihrem Internetauftritt.


KJC Chatbot – Anleitung für Entwickler

Einbindung des Corona Chatbots über zwei mögliche Wege.


  1. Einbindung über Verlinkung

Reine Verlinkung von

https://kjc-digital.de/

z.B. über ein Bild:


2. Einbindung über Code

(iframe, html, js)

iframe

<iframe id="KJCBOT" src="https://kjc-digital.de/#frame" name="KJCBOT" width="100%" height="900px" frameborder="0" marginwidth="0px" marginheight="-100px" scrolling="yes"></iframe>

html

<div id="webchat" role="main"></div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

<script>
    const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
        if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
            dispatch({
                type: 'WEB_CHAT/SEND_EVENT',
                payload: {
                    name: 'webchat/join',
                    value: { language: window.navigator.language }
                }
            });
        }
        return next(action);
    });

    (async function () {
        const token =  'ue9QCOt2FWU.s15igzGBUifXkmlgr6n6eB9JYM1Dp-DdvcMlMxhQT_Y';
        const region = 'westeurope';
        const subscriptionKey = '5027bbe03470493eaaf33da92c50f6c7';

        const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
            subscriptionKey,
            region          
        });

        const styleOptions = {
            botAvatarImage: 'https://kjc-digital.de/wp-content/uploads/2020/09/Bot-Icon-transparent.png',
            botAvatarInitials: 'BC',
            userAvatarImage: 'https://kjc-digital.de/wp-content/uploads/2020/08/user_icon_kjc.jpg',
            userAvatarInitials: 'UC'
        };
			
				const styleSet = window.WebChat.createStyleSet({
          bubbleBackground: 'rgba(0, 0, 0, 0)',
          bubbleFromUserBackground: 'rgba(0, 0, 0, 0)'
        });

        styleSet.textContent = Object.assign({}, styleSet.textContent, {
          fontFamily: "'Arial', sans-serif",
          fontWeight: 'medium'
        });
	
        window.WebChat.renderWebChat({
            directLine: window.WebChat.createDirectLine({ token }),
            store,
            locale: 'de-DE',
            styleOptions,
					  styleSet,
            webSpeechPonyfillFactory
					
        },

        document.getElementById('webchat'));
        document.querySelector('#webchat > *').focus();
    })().catch(err => console.error(err));
</script>
    
<style>
    #webchat {
        margin: 0 auto;
        clear: both;
        padding: 0 0px;
        position: fixed;
        bottom: 0;
        top: 0px;
        padding-bottom: 0px;
        width: 100%;
        height: 100%;
				font-size:large;
    }
</style>

js

  </style>
</head>
<body>
  <div id="webchat" role="main"></div>
  <script>
    (async function () {
    window.WebChat.renderWebChat({
      directLine: window.WebChat.createDirectLine({ token }),
      styleOptions: {
        rootHeight: '100%',
        rootWidth: '100%'
      }
    }, document.getElementById('webchat'));
    })()
  </script>