Webflow Integration

Add ASKGPT to Your
Webflow Site

Embed your AI chatbot on any Webflow project in under 2 minutes — using Webflow's built-in Custom Code feature, no extra tools needed.

Webflow Basic, CMS, Business, and Enterprise · Works on all plans with custom code
Choose Your Method

Two Ways to Add the Widget

Pick the approach that fits your needs:

Site-Wide (All Pages) Recommended

Add the widget code in Project Settings → Custom Code → Footer Code. Widget appears on every page automatically — set it once, done.

Page-Specific

Add the widget code in the Page Settings → Custom Code → Before </body> tag for a single page. Use this if you want it on just the landing page or contact page.

ℹ️
Custom Code requires a paid Webflow plan (Basic, CMS, Business, or Enterprise). It's not available on the free Webflow plan.
Method A — Recommended

Add to All Pages

1
Open Project Settings
Access the site-wide custom code area
  • 1. Open your Webflow project in the Webflow Designer
  • 2. Click the ⚙️ Settings icon in the left sidebar (or go to Site Settings from the dashboard)
  • 3. Navigate to the Custom Code tab
2
Paste into Footer Code
The footer code section loads before </body> on every page

Scroll down to Footer Code and paste the following script. Replace YOUR_CHATBOT_ID with your real ID from the ASKGPT dashboard:

HTML
<!-- ASKGPT Chat Widget -->
<script
src="https://askgpt.asksol.pk/widget/widget.js"
data-client-id="YOUR_CHATBOT_ID"
data-api-url="https://n8n.asksol.pk/webhook/askgpt-chat"
data-title="AI Assistant"
data-color="#4353FF"
data-position="right"
data-icon="chat"></script>
<!-- /ASKGPT -->
💡
Your exact embed code (with your real Chatbot ID pre-filled) is in Dashboard → Customization → Widget Embed Code. Just copy and paste.
3
Save & Publish
Publish your site to make the widget live
  • 1. Click Save in the Custom Code settings page
  • 2. Go back to the Designer and click Publish (top-right) → Publish to webflow.io or your custom domain
  • 3. Open your published site and look for the chat button in the bottom corner
  • 4. Click it and send a test message to verify
⚠️
The widget does not appear in the Webflow Designer preview — it only loads on your published site. This is normal behavior for external scripts.
Method B — Page-Specific

Add to a Single Page

1
Open Page Settings
Each Webflow page has its own custom code section
  • 1. In the Webflow Designer, open the page you want the widget on
  • 2. Click the Pages icon in the left panel
  • 3. Hover over your page name and click the ⚙️ gear icon
  • 4. Scroll down to Custom Code
2
Paste into "Before </body> tag"
This section is at the bottom of Page Settings

Find the "Before </body> tag" field and paste the widget script there. Same code as Method A — just placed at the page level instead of site level.

💡
If you want the widget on multiple pages but not all pages, repeat this for each page. For 3+ pages, use Method A (site-wide) and handle exclusions by adding data-delay="0" or conditionally loading via a custom Webflow interaction instead.
3
Save & Publish
Publish the page to see the widget live
  • 1. Click Save in Page Settings
  • 2. Publish your site from the Designer
  • 3. Visit the specific page on your live site to verify the widget appears
Troubleshooting

Common Issues

🙈
Widget doesn't appear on the published site
  • ▸ Make sure you Saved the Custom Code settings AND Published the site
  • ▸ The widget doesn't show in the Designer preview — open the live published URL
  • ▸ Check that you're on a paid Webflow plan (Custom Code requires Basic or higher)
  • ▸ Hard refresh the browser: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
💬
Widget shows but bot doesn't respond
  • ▸ Verify your Chatbot ID is correct — get a fresh copy from the ASKGPT dashboard
  • ▸ Check that your chatbot has been trained (at least one indexed source)
  • ▸ Open browser DevTools → Console to look for CORS or network errors
  • ▸ Ensure your n8n webhook URL is publicly accessible
🎨
Widget clashes with Webflow interactions or navbar
  • ▸ The widget uses Shadow DOM — it cannot conflict with your CSS by design
  • ▸ If a sticky navbar covers the widget, increase bottom margin: data-bottom="80"
  • ▸ Add data-delay="2" if the widget interferes with page load animations
  • ▸ Use data-position="left" to move the widget to the opposite corner

Ready to Go Live on Webflow?

Create your ASKGPT account, train your bot on your Webflow site's content, and embed it in minutes.

Start Free Trial → ← Back to Integrations