Back to app

Overview
White Label App
1.4 Embed Branded Login Button via JS Widget

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	Home or landing page
B. Chat Widget	Floating chat assistant that launches your app	In the center of the page
C. Install Widget	Prompts visitors to install your app	Confirmation pages or popups

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 label
buttonColor → Background color
hoverColor → Hover color
borderRadius → 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 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://https://BRANDCODE.my-ai.coach",
});
</script>

Adds an App Install Button

💡 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.

Was this article helpful?