Drifter Widget Documentation
Add AI-powered trip planning to your website in minutes. Let your visitors discover authentic local experiences with our embeddable widget.
Add Drifter to your website in 3 easy steps
1Get Your API Key
- Log in to your Drifter dashboard
- Navigate to Settings → Drifter
- In the Widget section, click "Generate API Key"
- Copy your API key - you'll need it for the next step
2Add Widget Code to Your Website
Copy this code and paste it just before the closing </body> tag on your website:
<script
src="https://cdn.drifterai.app/widget.js"
data-api-key="YOUR_API_KEY_HERE"
data-position="bottom-right">
</script>Configuration Options:
data-api-key- Your API key (required)data-position- Button position:bottom-right(default) ormiddle-right
3Test Your Installation
- Save your changes and refresh your website
- Look for the dark blue circular button (usually in the bottom-right corner)
- Click the button to open the Drifter trip planning panel
- Try searching for a location or browsing recommendations
Success! Your visitors can now discover destinations and plan trips using AI-powered recommendations.
Troubleshooting
Having issues? Here are solutions to the most common problems:
Widget button doesn't appear
- •Check that your API key is correct and properly formatted (starts with 'fw_')
- •Verify the script tag is placed before the closing </body> tag
- •Open your browser's developer console (F12) and check for any error messages
- •Ensure your website allows external scripts (check Content Security Policy)
- •Try loading your site in an incognito/private window to rule out browser extensions
API key errors (401 Unauthorized)
- •Double-check that you copied the entire API key
- •Make sure there are no extra spaces or quotes around your API key
- •Verify your API key hasn't been revoked in the dashboard
- •Generate a new API key if the current one isn't working
- •Ensure you're using the correct API key for your organization
Widget opens but content doesn't load
- •Check your internet connection
- •Verify your organization has published spots/content
- •Look for JavaScript errors in the browser console
- •Try clearing your browser cache and cookies
- •Check if your firewall or ad blocker is interfering
Widget conflicts with my website's styles
- •The widget uses an iframe to prevent style conflicts
- •Check if your site has CSS that targets all iframes
- •Look for z-index issues - the widget button uses z-index: 999998
- •Contact support if you need help with specific conflicts
Widget doesn't work on mobile devices
- •The widget is fully responsive and should work on all devices
- •Check if your site's viewport meta tag is properly configured
- •Ensure your site isn't blocking touch events
- •Test in different mobile browsers to isolate the issue
Collecting Debug Information
If you're still having issues, collect this information for support:
- 1. Your website URL where the widget is installed
- 2. Browser and version (e.g., Chrome 120, Safari 17)
- 3. Any error messages from the browser console
- 4. Screenshot of the issue
- 5. Your organization name in Frontier Without
Browser Console: Press F12 (or Cmd+Option+I on Mac) → Console tab → Look for red error messages
Common Console Error Messages
Failed to load resource: 401 (Unauthorized)→ Your API key is invalid or missing
Refused to load the script ... violates the following Content Security Policy→ Your website's security policy is blocking external scripts. Contact your web developer.
Cross-Origin Request Blocked→ This is usually a configuration issue. Contact support with your website URL.
Frequently Asked Questions
Is the widget free to use?
The widget is included with your Frontier Without subscription. There are no additional charges for using the widget on your website.
Can I customize the widget's appearance?
Currently, the widget uses your organization's branding colors from your Frontier Without settings. More customization options including button style, colors, and position are coming soon.
Does the widget work on mobile devices?
Yes! The Drifter widget is fully responsive and provides an optimized experience on phones, tablets, and desktop computers.
How many API requests can I make?
There's no hard limit on API requests for normal usage. If you experience extremely high traffic, we'll reach out to discuss upgrading your plan.
Can I use the widget on multiple websites?
Yes, you can use the same API key on all websites owned by your organization. This includes your main site, microsites, and landing pages.
What data does the widget collect?
- • Anonymous usage analytics (searches, clicks)
- • User preferences for trip planning (not personally identifiable)
- • Performance metrics to improve the service
We do not collect personal information unless users explicitly provide it (e.g., saving a trip).
Will the widget slow down my website?
No. The widget loads asynchronously and won't block your page from loading. The script is optimized and served from a global CDN for fast loading times.
Can I track conversions from the widget?
Analytics integration is coming soon. You'll be able to track widget usage, popular searches, and trip planning conversions directly in your Frontier Without dashboard.
What browsers does the widget support?
The widget supports all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. Internet Explorer is not supported.
How do I remove the widget?
Simply remove the script tag from your website's code. The widget will immediately stop appearing for your visitors.
Can visitors save their trip plans?
Yes! Visitors can save their trips and access them via a unique link. No account creation is required.
What happens if my API key is compromised?
If you suspect your API key has been compromised, immediately generate a new one in your dashboard. The old key will be deactivated, and you'll need to update your website with the new key.
Still have questions?
Email Support
Documentation Updates
Check back regularly for new features and guides