ChatBot Builder Logo

Chatbot Builder

Conversation Blocks

Chatbot Preview

{{ message.content }}
{{ message.content }}
Chatbot image

Chatbot Settings

Export Code

{{ exportedCode }}

User Guide

Welcome to ChatBot Builder! Follow these steps to create your chatbot:

  1. Enter a name for your chatbot in the "Chatbot Name" field.
  2. Drag and drop conversation blocks from the "Conversation Blocks" section to build your chatbot's conversation flow.
  3. Customize each block's content and settings based on the block type (message, question, image, or button).
  4. Test your chatbot in the "Chatbot Preview" section by sending messages and observing the responses.
  5. Customize your chatbot's appearance, language, and other settings in the "Chatbot Settings" section.
  6. Export your chatbot's code for integration with your website using the "Export Code" button.
`; commit('setExportedCode', code); }, }, }); new Vue({ el: '#app', store, computed: { chatbotName: { get() { return this.$store.state.chatbotName; }, set(value) { this.$store.state.chatbotName = value; }, }, conversationBlocks: { get() { return this.$store.state.conversationBlocks; }, set(value) { this.$store.state.conversationBlocks = value; }, }, chatMessages() { return this.$store.state.chatMessages; }, userInput: { get() { return this.$store.state.userInput; }, set(value) { this.$store.commit('setUserInput', value); }, }, showUserGuide() { return this.$store.state.showUserGuide; }, chatbotSettings: { get() { return this.$store.state.chatbotSettings; }, set(value) { this.$store.commit('updateChatbotSettings', value); }, }, exportedCode() { return this.$store.state.exportedCode; }, }, methods: { addBlock() { this.$store.commit('addBlock'); }, removeBlock(index) { this.$store.commit('removeBlock', index); }, sendMessage() { this.$store.dispatch('sendMessage'); }, handleButtonClick(buttonText) { this.$store.dispatch('handleButtonClick', buttonText); }, openUserGuide() { this.$store.commit('setShowUserGuide', true); }, closeUserGuide() { this.$store.commit('setShowUserGuide', false); }, exportCode() { this.$store.dispatch('exportCode'); }, }, watch: { chatbotSettings: { handler(newSettings) { localStorage.setItem('chatbotSettings', JSON.stringify(newSettings)); }, deep: true, }, conversationBlocks: { handler(newBlocks) { localStorage.setItem('conversationBlocks', JSON.stringify(newBlocks)); }, deep: true, }, }, mounted() { const savedSettings = localStorage.getItem('chatbotSettings'); if (savedSettings) { this.$store.commit('updateChatbotSettings', JSON.parse(savedSettings)); } const savedBlocks = localStorage.getItem('conversationBlocks'); if (savedBlocks) { this.$store.state.conversationBlocks = JSON.parse(savedBlocks); } this.$nextTick(() => { Prism.highlightAll(); }); }, });