> ## Documentation Index > Fetch the complete documentation index at: https://learn.getodin.ai/llms.txt > Use this file to discover all available pages before exploring further. # Integrate Odin AI Chatbot to Your Website & Apps > Seamless Integration, Anywhere You Need Bring Odin's conversational AI chatbot directly into your digital experience with ease. Whether you want to add it to a website, Next.js, React.js, Angular, or WordPress, the integration process is simple and designed to fit seamlessly into your existing setup. This guide walks you through each option, helping you deliver smarter customer engagement and real-time support right where your users need it. ## Integrate to Your Website To add the chatbot anywhere on your website, use the HTML script below to add the chatbot in a "new window" format to enhance your website with AI-powered chatbots that can handle visitor inquiries seamlessly. Add this script to your HTML code.\ Make sure to replace `Your_Project_ID_Here` with your Project's ID. ```
theme={null} ``` To add the chatbot as a chat bubble to the bottom-right of your website, use the HTML script below. This is ideal for providing instant support, allowing users to interact with the Odin AI chatbot easily. Add this script to your HTML code. Make sure to replace `Your_Project_ID_Here` with your Project's ID. ``` ``` ## Integrate to Next.js App To integrate Odin AI chatbot into your Next.js app as a chat window, follow these instructions: 1. Place the following script in the `rootLayout` or **App file**: ```import Script from "next/script" theme={null} export default function TalkToOdin() { return (

Talk to Odin Now

) } ``` 2. Add the following `
` tag in the component where you want the Chat Window to appear. `
` To integrate Odin AI chatbot into your Next.js app as a chat bubble, follow these instructions: 1. Place the following script in the `rootLayout` or **App file**: ```import Script from "next/script" theme={null} export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } ``` 2. If you've added the Chatbot as a Chat Window previously, make sure you remove the following `
` tag while using the chat widget. `
` ## Integrate to React.js App 1. Add the following script within the `` tag of the index.html file located in the public folder. ``` ``` 2. Add the following `
` tag in the page or component where you want the Chat Window to appear. ```import React from "react"; theme={null} export default function Home() { return (
Card
New Season Arrivals
); }; ``` 1. Add the following script within the `` tag of the index.html file located in the public folder. ``` ``` 2. If you've added the Chatbot as a Chat Window previously, make sure you remove the following `
` tag while using the chat widget. `
` ## Integrate to Angular Project 1. Add the following script to the index.html file located in the public folder. ``` theme={null} Angular ``` 2. Add the following `
` tag in the page or component where you want the Chat Window to appear. ```
theme={null}

Odin AI Chatbot

Congratulations! Your app is running. 🎉

``` 1. Add the following script to the index.html file located in the public folder. ``` theme={null} Angular ``` 2. If you've added the Chatbot as a Chat Window previously, make sure you remove the following `
` tag while using the chat widget. `
` ## Integrate to WordPress Site To add the chatbot to your WordPress site, you can add the following jQuery script to the page using the `Custom HTML` block in the WordPress editor: ``` ``` To add the chatbot as a chat bubble to your WordPress site, you can add the **Chat Window** script, mentioned above, to the page using the `Custom HTML` block in the WordPress editor and then add the following CSS script: ```.opbcb-chat-container { theme={null} border-radius: 20px; bottom: 90px; height: 88% !important; margin-left: 20px; margin-right: 20px; margin-top: 20px; max-height: 750px; max-width: 450px; position: fixed; right: 5px; transition: all .3s ease; width: 100%; z-index: 999; top: 30px !important; } ``` If you want to add the Chat Bubble in the footer of the page, then you need to first add the script in the `Custom HTML` block of the footer along with the CSS code.