Install tokwork in Webflow

Add tokwork to your Webflow site using the custom code feature.

Installation Steps

Step 1: Open Project Settings

1. Open your Webflow project
2. Click the Settings icon (gear icon) in the left panel
3. Go to the Custom Code tab

Step 2: Add tokwork Script

Paste the following code in the Footer Code section:

<!-- tokwork Widget -->
<script async src="https://js.tokwork.com/loader.js" 
  data-website-id="YOUR_WEBSITE_ID" 
  data-website-domain="yourdomain.com">
</script>

Step 3: Publish Site

1. Click Save Changes
2. Publish your site for the changes to take effect

Site-Wide vs. Page-Specific

Site-Wide Installation (Recommended)

Use Project Settings → Custom Code to add the script to all pages automatically.

Page-Specific Installation

To add the widget to specific pages only:

1. Select a page in the Pages panel
2. Click Page Settings (gear icon)
3. Go to Custom Code tab
4. Add the script in Before </body> tag

Verify Installation

1. Publish your site
2. Visit your live Webflow site (not the designer preview)
3. Open browser console (F12)
4. Look for: ✅ tokwork Widget loaded successfully
5. Check for the widget popup

CMS Collection Pages

The widget automatically works on:

• ✅ CMS Collection pages
• ✅ Blog posts
• ✅ Dynamic pages
• ✅ E-commerce pages

No additional configuration needed!

Webflow E-commerce

tokwork integrates seamlessly with Webflow E-commerce:

• Works on product pages
• Works on checkout pages
• Tracks all visitor interactions

Common Issues

Best Practices

• ✅ Use Footer Code for better performance
• ✅ Add to Project Settings for site-wide installation
• ✅ Always test on published site, not designer
• ✅ Use staging site to test before going live

Performance

The tokwork script:

• Loads asynchronously (no impact on page load)
• Is CDN-optimized for fast delivery
• Doesn't affect Webflow's performance score

Next Steps

• Learn basic usage
• Explore other platforms