ChatBot Builder Logo

Chatbot Builder

Conversation Blocks

Chatbot Preview

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

Chatbot Settings

Performance Analytics

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. View your chatbot's performance analytics in the "Performance Analytics" section.
  7. Export your chatbot's code for integration with your website using the "Export Code" button.

Login

`; commit('setExportedCode', code); }, updatePerformance({ commit, state }) { const newPerformanceData = { conversations: state.performanceData.conversations + 1, engagement: (state.performanceData.engagement + Math.random()) / 2, satisfaction: (state.performanceData.satisfaction + Math.random()) / 2, }; commit('updatePerformanceData', newPerformanceData); updatePerformanceChart(); }, login({ commit, state }) { // Simulated login process if (state.loginForm.email && state.loginForm.password) { commit('setIsLoggedIn', true); commit('setShowLoginModal', false); } }, logout({ commit }) { commit('setIsLoggedIn', false); }, }, }); 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; }, showLoginModal() { return this.$store.state.showLoginModal; }, isLoggedIn() { return this.$store.state.isLoggedIn; }, chatbotSettings: { get() { return this.$store.state.chatbotSettings; }, set(value) { this.$store.commit('updateChatbotSettings', value); }, }, exportedCode() { return this.$store.state.exportedCode; }, loginForm() { return this.$store.state.loginForm; }, }, 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); }, openLoginModal() { this.$store.commit('setShowLoginModal', true); }, closeLoginModal() { this.$store.commit('setShowLoginModal', false); }, login() { this.$store.dispatch('login'); }, logout() { this.$store.dispatch('logout'); }, 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(); initPerformanceChart(); }); }, }); function initPerformanceChart() { const ctx = document.getElementById('performanceChart').getContext('2d'); window.performanceChart = new Chart(ctx, { type: 'line', data: { labels: [], datasets: [ { label: 'Conversations', data: [], borderColor: 'rgb(75, 192, 192)', tension: 0.1, }, { label: 'Engagement', data: [], borderColor: 'rgb(255, 99, 132)', tension: 0.1, }, { label: 'Satisfaction', data: [], borderColor: 'rgb(54, 162, 235)', tension: 0.1, }, ], }, options: { responsive: true, scales: { y: { beginAtZero: true, }, }, }, }); } function updatePerformanceChart() { const chart = window.performanceChart; const store = document.getElementById('app').__vue__.$store; const performanceData = store.state.performanceData; chart.data.labels.push(new Date().toLocaleTimeString()); chart.data.datasets[0].data.push(performanceData.conversations); chart.data.datasets[1].data.push(performanceData.engagement); chart.data.datasets[2].data.push(performanceData.satisfaction); if (chart.data.labels.length > 10) { chart.data.labels.shift(); chart.data.datasets.forEach((dataset) => dataset.data.shift()); } chart.update(); }