Schilan bot platform

Intro

We believe that chat conversation is the most natural graphical user interface. Chatbot should not be just messaging tool. Using software application can be percieved as just conversation between user and machine. Schilan gives you opportunity to do that.

What is Schilan

Schilan is platform for making bot application with minimum code. Surveys and questionaries can be generated directly, with zero code approach. For custom workflow application, some knowledge is needed, as simple as Excel functions

Audience

For surveys, any service provider. Anyone who want to know what do customers think about service. Training providers, any person or company responsible for training or educations. Software developers, marketing agency or any company with digital keyword in service description.

Registration and login

No installation, no download, just register. Steps are shown bellow.

Go to App Login option, upper right corneron www.schilan.com page

GitHub Logo

Go to Register as shown bellow and fill your email and schilan password

GitHub Logo

After registration, login on schilan platform

GitHub Logo

Now you can browse www.schilan.com as authenticated user.

Keep in mind that you are just simple user now. That means that you can access some bot converasation where login is needed.

But, if you want to be author, please contact us on office@schilan.com or go to . We can grant you author role. You will be able to create content. Let's imagine that you got that rights. Select button GO [USER]

GitHub Logo

Congratulations!

Now you can continue with prefered scenario.

Survey
Education
Custom workflow application

Deployment

There is no explicit deployment! If you want to use your bot conversation just share link or qr code https://www.schilan.com/Home/Chatbot?myCode=TICKET

GitHub Logo

Deploy on own page

Import webchat.js from CDN.

<html>
<head>

</head>  
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<body>
<h1>Demo</h1>
<div id="chatBotFrame" style="fontFamily:Lato">
</div>

</body>

<script>

Javascript part

$(document).ready(function() {
    console.log( "ready!" );
});
$.ajax({
            url: 'https://directline.botframework.com/v3/directline/tokens/generate',
            method: "POST",
            headers: {
                "Authorization": "Bearer ITJe62pEwQw.Sz___ASK_FOR_THIS_TOKEN_____"
            },
        }).then(function (response) {
            const { token } = JSON.parse(JSON.stringify(response));
            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);
            });
            // Set  the CSS rules.
             const styleSet = window.WebChat.createStyleSet({
                 bubbleBackground: 'rgba(0, 0, 255, .1)',      //related to message bubble
                 bubbleFromUserBackground: 'rgba(0, 255, 0, .1)', //related to user bubble
                 rootHeight: '100%',  
                 rootWidth: '50%',
                 backgroundColor: 'white', 
                 hideScrollToEndButton: true


                //Suggested Actions
                suggestedActionBackground: 'White',  //
                suggestedActionBorder: undefined, // split into 3, null
                suggestedActionBorderColor: undefined, // defaults to accent
                suggestedActionBorderStyle: 'solid',
                suggestedActionBoarderWidth: 2,
                suggestedActionBorderRadius: 10,
                suggestedActionImageHeight: 30,
                suggestedActionTextColor: null,             
                suggestedActionHeight: 40               

              });

              // After generated, you can modify the CSS rules.
              // Change font family and weight. 
              styleSet.textContent = {
                 ...styleSet.textContent,
                 fontFamily: "'Lato'",
                 fontWeight: 'normal',
                 fontSize: '14px'                
              };


            const avatarOptions = {
               botAvatarImage: 'http://www.schilan.com/media/schilan.jpg', //bot image
               botAvatarInitials: 'OA', //set bot initials
               userAvatarImage: 'https://cci-prod-botdesigner.azureedge.net/20200326.4/img/ef9b3564120c0823ad37d8f61b098698.svg',
               userAvatarInitials: 'ME' //Set user initials
            };

            window.WebChat.renderWebChat(
                {
                    directLine: window.WebChat.createDirectLine({ token }),
                    store,
                    styleSet,
                    styleOptions: avatarOptions
                },
                document.getElementById('chatBotFrame')
            );

            document.querySelector('#chatBotFrame > *').focus();
        }).catch(function (err) {
            console.error(err);
        });

closing html part

</script>   
</html>