1.4 Embed Branded Login Button via JS Widget
How to Add the AI Coach Widgets to Your Creator Website
Introduction
As a creator, you can embed your AI Coach directly into your site, portfolio, or sales page — helping your audience chat, book sessions, or explore your personalized AI assistant.
Step-by-Step Setup
Copy one of the widget scripts below.
Replace all instances of
https://BRANDCODE.my-ai.coach/with your unique brand or app domain (e.g.,https://hero.my-ai.coach).Paste the code anywhere in your site’s HTML editor — or use an embed block in your CMS (WordPress, Squarespace, Wix, etc.).
Save and preview.
🧩 Widget Options
Widget | Description | Best Use |
|---|---|---|
A. App Button Widget | Launch button for your app that opens a log-in/sign-up pop-up | Home or landing page |
B. Chat Widget | Floating chat assistant that launches your app with a log-in/sign-up pop-up | In the center of the page |
C. Install Links Widget | Shows the app install links directly as iframe in your website | Inside dedicated landing pages |
D. Install Button Widget | Shows an install button and opens a pop-up with the install links | On multiple locations in your marketing landing pages |
A. App Button Widget
This adds a customizable button that opens your AI Coach app.
<script src="https://BRANDCODE.my-ai.coach/app-widget.js"></script>
<script>
AppWidget.create({
appDomain: "https://BRANDCODE.my-ai.coach",
buttonText: "Open AI Coach",
buttonColor: "#2d2d2b",
hoverColor: "#FCD730",
buttonTextColor: "#FFFFFF",
buttonTextHoverColor: "#000000",
borderRadius: "12px"
});
</script>
Customize the appearance using:
buttonText→ Change button labelbuttonColor→ Background colorhoverColor→ Hover colorborderRadius→ Button corner style
The button that you will see on your website with this widget:
After clicking that button, a pop-up modal will open with your branded app sign-in screen.
B. Chat Widget
This adds a chat box that lets users interact directly with your AI Coach.
<script src="https://BRANDCODE.my-ai.coach/app-widget.js"></script>
<script>
ChatWidget.create({
appDomain: "https://BRANDCODE.my-ai.coach",
chatRequest: "Start typing here...",
appTitle: "AI Coach",
appSubTitle: "Your personal AI Coach is here to help you.",
buttonColor: "#2d2d2b",
hoverColor: "#FCD730",
chatBorderColor: "#FCD730",
borderRadius: "12px"
});
</script>
The widget will add textfield section that will start the app in a modal:
C. Install Links Widget
Encourages visitors to install your app on their devices for easier access.
<script src="https://BRANDCODE.my-ai.coach/app-widget.js"></script>
<script>
InstallWidget.create({
appDomain: "https://BRANDCODE.my-ai.coach",
});
</script>
Adds an App Install Button
Directly shows the install links on your site
D. Install Button Widget
Encourages visitors to install your app on their devices for easier access.
<script src="https://BRANDCODE.my-ai.coach/app-widget.js"></script>
<script>
InstallWidget.create({
appDomain: "https://BRANDCODE.my-ai.coach",
});
</script>
Adds an App Install Button
… and the pop-up
💡 Pro Tips
Keep colors aligned with your personal brand.
Place the widget near your call-to-action or signup button.
Test the chat experience both on desktop and mobile.