From 52072a304cf79f07671113e0e222d7cab4177cca Mon Sep 17 00:00:00 2001
From: Alejandra <alejsdev@gmail.com>
Date: Wed, 18 Feb 2026 16:15:02 +0100
Subject: [PATCH] Refactor Kapa.ai widget styling

---
 docs/en/docs/js/init_kapa_widget.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/docs/en/docs/js/init_kapa_widget.js b/docs/en/docs/js/init_kapa_widget.js
index 0bfa055b5f..eaf123bf3f 100644
--- a/docs/en/docs/js/init_kapa_widget.js
+++ b/docs/en/docs/js/init_kapa_widget.js
@@ -5,6 +5,25 @@ document.addEventListener("DOMContentLoaded", function () {
   script.setAttribute("data-project-name", "FastAPI");
   script.setAttribute("data-project-color", "#009485");
   script.setAttribute("data-project-logo", "https://fastapi.tiangolo.com/img/favicon.png");
+  script.setAttribute("data-bot-protection-mechanism", "hcaptcha");
+  script.setAttribute("data-button-height", "3rem");
+  script.setAttribute("data-button-width", "3rem");
+  script.setAttribute("data-button-border-radius", "50%");
+  script.setAttribute("data-button-padding", "0");
+  script.setAttribute("data-button-image", "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E");
+  script.setAttribute("data-button-image-height", "20px");
+  script.setAttribute("data-button-image-width", "20px");
+  script.setAttribute("data-button-text", "Ask AI");
+  script.setAttribute("data-button-text-font-size", "0.5rem");
+  script.setAttribute("data-button-text-font-family", "Roboto, sans-serif");
+  script.setAttribute("data-button-text-color", "#FFFFFF");
+  script.setAttribute("data-modal-border-radius", "0.5rem");
+  script.setAttribute("data-modal-header-bg-color", "#009485");
+  script.setAttribute("data-modal-title", "FastAPI AI Assistant");
+  script.setAttribute("data-modal-title-color", "#FFFFFF");
+  script.setAttribute("data-modal-title-font-family", "Roboto, sans-serif");
+  script.setAttribute("data-modal-example-questions", "How to define a route?,How to validate models?,How to handle responses?,How to deploy FastAPI?");
+  script.setAttribute("data-modal-disclaimer", "AI-generated answers based on FastAPI [documentation](https://fastapi.tiangolo.com/) and [community discussions](https://github.com/fastapi/fastapi/discussions). Always verify important information.");
   script.async = true;
   document.head.appendChild(script);
 });