𝖄𝕺🌎𝕿𝕽𝕺¥

𝖄𝕺🌎𝕿𝕽𝕺¥

𝕴 𝖉𝖔 𝖒𝖆𝖌𝖎𝖈
github

Configure botui for the blog to add a dialogue interaction framework - using Halo blog as an example.

title: Configuring botui for blog with dialogue interaction framework - using halo blog as an example
date: 2021-03-29 04:08:16.167
updated: 2021-07-20 22:01:57.426
url: /?p=105
categories:

  • Computer
    tags:
  • Botui
  • halo

Botui

GitHub - botui/botui: 🤖 A JavaScript framework to create conversational UIs

Configuration

Refer to the official GitHub documentation, now providing a solution for halo blog, the demonstration effect and its code are placed at the end of the article.

Configure <head>

[Backend-System-Other Settings-Custom Content Page Head]

<link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" />
<link rel="stylesheet" href="https:/unpkg.com/botui/build/botui-theme-default.css" />

Configure content page

Type the following in the content page to apply

<div class="botui-app-container" id="example"><!-- id should correspond -->
  <bot-ui></bot-ui>
</div>
<script src="https://cdn.jsdelivr.net/vue/2.0.5/vue.min.js"></script>
<script src="https://unpkg.com/botui/build/botui.js"></script>
<script src="/themes/source/botui/example.js"><!-- location of interaction js file -->//
</script>

Please modify the location of the interaction js file yourself to prevent accidental deletion during updates.

Interaction js document

Next is to configure the js interaction file, which still requires a certain coding foundation. Refer to the following:
Official documentation https://docs.botui.org/
Github example https://github.com/botui/botui-examples

Bug

Page flipping occurs when clicking buttons, etc.

Preview

If not displayed, please refresh the page.
example1

//example1
var botui = new BotUI('example1');//name should correspond to id

botui.message.add({
  content: 'Hello World from bot!'
});

botui.message.add({
  human: true,
  content: 'Hello World from human!'
});

example2

//info
var botui = new BotUI('info');

botui.message.add({
    content: '!'
});

botui.message
    .bot({
        delay: 1000,
        content: 'Hi, 你好呀!'
    }).then(function () {
        return botui.action.button({
            delay: 1000,
            action: [{
                text: 'Hi',
                value: 'hi'
        },{
                text: '......',
                value: 'no_reply'
        }]
    })
}).then(function (res) {
    if(res.value == 'hi') {
        showReminderInput();
    } else {
        botui.message.bot('屁颠屁颠逃走了');
    }
});

var showReminderInput = function () {
    botui.message
        .bot({
            delay: 500,
            content: '我叫Lil Troy,你叫什么呀?'
        }).then(function () {
            return botui.action.text({
                delay: 3000,
                action:{
                    placeholder:'键入你的名字'
                }
            })
        }).then(function (user_name){
            botui.message
                .bot({
                    delay: 500,
                    content: '你好呀,' + user_name.value +'。感谢你来看我!'
                });
        })
}
Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.