[Help]

[miguelisidoro]

Hello,

I want to build a Chat bot in a custom React application (public web site). I have a few questions:

1) Is it possible to fully customize the web chat UI? 2) Is it possible to change the code of the chatbot in our application? 3) Is it possible to change the code of the web chat in order to call our APIs that will receive a prompt and generate a response? 4) Is it possible to change the Html and CSS?

If this is possible, can you provide links to documentation on how to do this?

Thanks

[tjtanjin]

Hey @miguelisidoro! To answer your questions:

1. Yes, it is possible to customize the UI via style props or by targeting the CSS classes directly
2. This depends on what you're trying to do, but you can currently customize the bot with the available props to a great extent
3. You can definitely call your own APIs, there are live examples provided (which I'll link below)
4. Similar to point 1, yes!

The answer to all the above can be found at this documentation: https://react-chatbotify.tjtanjin.com. I also recommend trying out the playground and live examples on the website. Specifically for calling your own APIs or using LLMs, you can refer to the following examples:

• https://react-chatbotify.tjtanjin.com/docs/examples/real_time_stream
• https://react-chatbotify.tjtanjin.com/docs/examples/llm_conversation
• https://react-chatbotify.tjtanjin.com/docs/examples/smart_conversation

[miguelisidoro]

Hi @tjtanjin ,

Thanks for the fast reply!

Can you send me the example where to build a minimable chat bot that opens when the user clicks on the call to action? Is it possible to remove Powered By React Chatbotify? Via Html or CSS for example?

Thanks

[tjtanjin]

Hi @tjtanjin ,

Thanks for the fast reply!

Can you send me the example where to build a minimable chat bot that opens when the user clicks on the call to action?

Thanks

If you look at the live examples, they all contain theme: {embedded: true} within the options prop. This is because the examples are embedded. If you want the chatbot to be minimized initially, you can simply set embedded to false or remove it entirely (defaults to false). You'll end up with the mini chatbot on the bottom right of the screen which you can see on the documentation website itself.

You can also remove the "Powered By React ChatBotify" text by modifying the text attribute within footer. The available options can be found here: https://react-chatbotify.tjtanjin.com/docs/api/bot_options

[miguelisidoro]

Hello @tjtanjin ,

Thanks once again for the fast reply, I will take a look at the links you sent!

Thanks

[tjtanjin]

Hello @tjtanjin ,

Thanks once again for the fast reply, I will take a look at the links you sent!

Thanks

No problem, I'll close this issue for now but feel free to re-open it or reach out on discord if you need further assistance 😊

[miguelisidoro]

Hello @tjtanjin,

I am having some trouble testing one of your demos. The error is the following:

The problem is that I don't have the index folder inside dist in the node_modules folder.

I tried using npm and pnpm and both give error. The commands I ran were:

npm install react-chatbotify pnpm install react-chatbotify

Thanks

[tjtanjin]

Can you share a little bit more of what you're using and how your project is setup? E.g. React version, CRA/vite?

[miguelisidoro]

Hello @tjtanjin,

The relevant part of my packages.json:

"dependencies": { "@remix-run/express": "^2.8.1", "@remix-run/node": "^2.8.1", "@remix-run/react": "^2.8.1", "algoliasearch": "^4.20.0", "compression": "^1.7.4", "embla-carousel-autoplay": "^7.0.5", "embla-carousel-class-names": "^7.0.5", "embla-carousel-react": "^7.0.5", "helmet": "^7.1.0", "isbot": "^3.7.1", "pnpm": "^9.5.0", "react": "^18.2.0", "react-chatbotify": "^1.7.0", "react-dom": "^18.2.0", "remix": "^2.8.1", "remix-utils": "^7.6.0" }, "devDependencies": { "@mdx-js/rollup": "^3.0.1", "@remix-run/dev": "^2.8.1", "@remix-run/eslint-config": "^2.8.1", "@remix-run/serve": "^2.8.1", "@types/react": "^18.2.39", "@types/react-dom": "^18.2.17", "autoprefixer": "^10.4.16", "concurrently": "^8.2.2", "dotenv": "^16.3.1", "eslint": "^8.54.0", "postcss": "^8.4.31", "remark-frontmatter": "^5.0.0", "remark-mdx-frontmatter": "^4.0.0", "tailwindcss": "^3.3.5", "typescript": "^5.1.6", "vite": "^5.1.5", "vite-tsconfig-paths": "^4.3.1" }, "engines": { "node": ">=20" }

Thanks

[tjtanjin]

@miguelisidoro Could you provide in as much detail as possible the share the step-by-step instructions for reproducing this error?

[miguelisidoro]

Hello @tjtanjin,

We have a React based solution that uses Remix and Vite. The node modules we are using are the ones included in packages.json. To reproduce the error we run npm run dev.

React component that is throwing the error has the following source code:

import { useRef } from 'react'; import ChatBot from 'react-chatbotify'; import type { CockyComponent } from '~/models/cocky,nodel'; import { setLayoutSwitch } from '~/utils/component-settings'; import { getLocaleFromPath } from '~/utils/locale';

const Bot = (props: BotComponent) => { const refParent = useRef<HTMLDivElement | null>(null); const settings = props.settings; const layout = setLayoutSwitch('Bot', settings?.layout); const locale = getLocaleFromPath(location.pathname);

let translate: { [key: string]: string };

switch (locale) { case 'pt': translate = { newchat: 'Nova conversa' }; break; case 'es': translate = { newchat: 'Nueva conversación' }; break; default: translate = { newchat: 'New chat' }; }

const BotChatBot = () => { async function fetchData() { try { const response = await fetch('https://jsonplaceholder.typicode.com/todos/1') const data = await response.json(); return data.title; } catch (error) { return 'Oh no I dont know what to say!'; } } let count = 0; const flow={ start: { message: 'Hey! I call an API!', path: 'loop' }, loop: { message: async (params) => { const result = await fetchData(); return result; }, path: 'loop', } } return ( <ChatBot options={{theme: {embedded: false}, chatHistory: {storageKey: 'example_smart_conversation'}}} flow={flow}/> ); };

return (

); };

Thanks

Thanks

[tjtanjin]

Let's continue the discussion here