Docs/widget setup

Widget setup

Customize the chatbot widget, configure allowed domains, and copy your embed code.

Design

Use the Widget page to customize how your chatbot looks on your website.

→Colors — primary and background color
→Launcher label — button text
→Welcome title and message
→Chatbot name and avatar
→Position — bottom left or bottom right
→Branding — hide AskGPT badge (Enterprise plan)

Domain access

Add the exact domains where your chatbot widget is allowed to run. If the domain list is empty, the widget is public and will respond on any website.

→Add each domain where the widget should run
→Leave empty to keep the chatbot public on any origin
→Add localhost for local development testing

💡Use the exact hostname without protocol — e.g. yoursite.com not https://yoursite.com. Add www and non-www separately if needed.

Embed script

Copy the embed script and paste it before the </body> tag on every page where you want the chatbot to appear. You can also customize widget spacing using data attributes on the script tag.

→data-bot-id (required) — your unique chatbot identifier
→data-margin-bottom (optional) — vertical offset from screen bottom in px (default 22)
→data-margin-side (optional) — horizontal offset from screen edge in px (default 22)

Verify the install

After adding the script, open the published page (not the dashboard) and confirm the chat launcher appears. Send a test message to verify the full flow works.

→Open the live page URL
→Confirm the chat launcher appears
→Send a test question
→Verify the response is accurate
→Test on a mobile device

Full-page chat (/chat/your-bot-id)

Every published chatbot also has a standalone, full-screen chat page — perfect for a 'Resources → AI Assistant' menu item or a hero 'Try the AI Assistant' button. It automatically uses the same colors, avatar, welcome message, and suggested questions you set above, so there is nothing extra to configure.

→YOUR_BOT_ID is the same Bot ID from your embed script
→Public page — visitors don't need to log in
→Inherits all your Widget design settings automatically
→Use it as a direct link, or embed it in a page (iframe)

https://askgpt.asksol.pk/chat/YOUR_BOT_ID

💡Tip: link this URL from any website menu item or button to give visitors a full-screen assistant instead of only the corner bubble.

Embed the full page inside your site (iframe)

To keep visitors on your own domain (e.g. a dedicated Resources page), drop the chat page into an iframe. In WordPress use a 'Custom HTML' block; in most site builders use an Embed / HTML element.

💡The /chat page is iframe-friendly by design — it can be embedded on any site, just like the widget.

Open the chat from your own button or menu

There are two ways to wire up a custom 'Try the AI Assistant' button or a menu link — pick based on whether you want a full page or the corner bubble.

→Full-page: point the button/menu link at https://askgpt.asksol.pk/chat/YOUR_BOT_ID
→Corner bubble: if widget.js is already on the page, add data-askgpt-open to any element — e.g. <button data-askgpt-open>Try the AI Assistant</button>
→With code: call window.AskGPT.open() (also .close() and .toggle())
→data-askgpt-toggle toggles the bubble open and closed

💡Use the full-page link for menu items and standalone pages; use data-askgpt-open when you want the corner chat bubble to pop open on the same page.

Test and publish Platform embeds

Need more help?

Contact support and we'll get back to you within 24 hours.