Ainisa AI documentation

Appearance

💻 Installing the Web Chat Widget ​

Once you’ve created your Chat Widget in the Ainisa Business Dashboard, you can easily add it to your website using the provided widget code.

🧩 1. Configure Widget Button Style ​

Before copying the code, you can customize your widget button appearance.

OptionDescription
Button Background ColorSet the main color of your chat button.
Button Text ColorAdjust the color of the chat icon or text.
Margin from Right / BottomPosition your widget button precisely within your website layout.

You can preview the button in real time before saving.

Widget Button Configuration

🧾 2. Add the Widget Script ​

After saving the button style, copy and paste the widget script before the closing </body> tag of your website.

html
<script src="https://chatbot.ainisa.com/widget.js"></script>

This script loads the chat widget on your page.

🔐 3. (Pro and Higher Plans) Add User Data for Context ​

For Pro and higher subscription plans, Ainisa supports automatic user data mapping.
You can pass your user’s/visitor's ID, name, or email (if they are authenticated in your website) directly to the AI Assistant for more personalized responses (e.g., order lookups, ticket tracking, or account-related help).

Add the following script before the widget script:

html
    <script>
      const userId = 'YOUR_USER_ID'; // Optional, your own user's id
      const userHash = 'YOUR_USER_HASH'; // Optional, your own user's hash. Must be created with secret key we provide
      const userFirstname = 'YOUR_USER_FIRST_NAME'; // Optional, your own user's firstname
      const userLastname = 'YOUR_USER_LAST_NAME'; // Optional, your own user's lastname
      const userEmail = 'YOUR_USER_EMAIL'; // Optional, your own user's email

      window.ainisaUser = {
        user_id: userId,
        firstname: userFirstname,
        lastname: userLastname,
        email: userEmail
      };
    </script>

💡 Tip:

  • The userHash should be generated using your secret key and the id of your user/visitor in your website.
  • Only include data you’re allowed to share.

🧱 4. Add the Widget Code Snippet ​

Finally, copy the provided widget container code and paste it in your HTML (typically in the footer).

html
    <!-- Ainisa Chatbot -->
    <div id="ainisa_chatbot" 
         data-btn-bg="#4992ef" 
         data-btn-color="#ffffff" 
         data-btn-margin="20" 
         data-btn-bottom="20">
      <iframe 
          allow="microphone; clipboard-write"
          src="https://chatbot.ainisa.com/widget/your-widget-uuid?publicKey=your-public-key&lang=en">
      </iframe>
    </div>
    <!-- Ainisa Chatbot -->

This code will render your chat button and load the Compact Chat interface when clicked.

⚙️ Notes ​

  • If your AI Assistant is set to Public, it can be used on any website.
  • For private assistants, you must specify allowed domains during widget creation.
  • Each widget can have a different assistant, language, or API key.
  • Button margin and colors can be customized anytime.
  • Pro plans support passing custom user data.
  • If you send us your user data for collection (like IDs, names, or emails), make sure this is clearly mentioned in your Privacy Policy or GDPR notice.
  • Do not send user data without explicit consent from your users.

✅ Example Setup Overview ​

  1. Create a widget in Ainisa Dashboard.
  2. Adjust widget button style.
  3. Copy both <script> and widget <div> code blocks.
  4. Paste them into your website before the </body> tag.
  5. (Optional) Add user data context if you’re on a Pro or higher plan.

Once done, reload your website — you’ll see the Ainisa chat bubble appear in the bottom-right corner.

🧭 Next Steps ​