ReqMe Widget is a powerful tool for automating customer request processing on your website. With simple JavaScript integration, you can add an intelligent request management system to any website in just a few minutes.
What is ReqMe Widget? #
ReqMe Widget is an interactive component that allows your website visitors to quickly submit requests or inquiries. The widget automatically classifies requests using artificial intelligence and ensures instant response to customer inquiries.
Key Benefits: #
- ✅ AI-powered request classification — automatic understanding of inquiry types
- ✅ Quick integration — setup in 5 minutes
- ✅ Responsive design — works on all devices
- ✅ CMS-agnostic — works with any platform
Installation Requirements #
Before starting the integration, ensure that:
- You have an API key from ReqMe dashboard (obtained after registration)
- Your website supports external JavaScript files
- You have access to edit your website’s HTML code
Step-by-Step Installation Guide #
Step 1: Include ReqMe Script #
Add the following code to the <head> section of your HTML document:
<script src="https://app.reqme.co/js/widget.min.js"></script>This script will load all necessary ReqMe widget components.
Step 2: Add Widget Container #
Add a container where the widget will be placed. This is typically done before the closing </body> tag:
<div id="reqme-widget-container"></div>Step 3: Generate a session token #
Before initializing the widget, you must request a session token from ReqMe using your API key. This token expires after 3 minutes for security reasons.
API Endpoint
GET https://api.reqme.co/clients/create-client-session?apiKey=${apiKey}
Example using JavaScript (browser):
<script>
async function fetchSessionToken(apiKey) {
const response = await fetch(
`https://api.reqme.co/clients/create-client-session?apiKey=${apiKey}`,
)
if (!response.ok) {
throw new Error('Failed to fetch session token')
}
const data = await response.json()
return data.sessionToken
}
</script>⚠️ Note: If CORS prevents this request from the browser, use a server-side proxy to securely fetch the token and expose it to the client.
Step 4: Initialize the Widget #
Once you have the session token, initialize the widget using window.ReqMe.init():
<script>
const apiKey = 'YOUR_API_KEY' // Replace with your actual API key
document.addEventListener('DOMContentLoaded', async function () {
try {
const token = await fetchSessionToken(apiKey)
window.ReqMe.init({
sessionToken: token, // Use the session token, not the raw API key
version: 'v2', // Supported: "v1", "v2"
buttonVersion: 'v3', // Choose from: "v1" through "v7"
})
} catch (error) {
console.error('Widget initialization failed:', error)
}
})
</script>⚠️ Important: Replace "YOUR_API_KEY" with your actual API key from your ReqMe dashboard.
Complete Integration Example #
Here’s the complete HTML code with integrated ReqMe widget:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>ReqMe Widget Example</title>
<!-- Load the widget script -->
<script src="https://app.reqme.co/js/widget.min.js"></script>
</head>
<body>
<div id="reqme-widget-container"></div>
<script>
async function fetchSessionToken(apiKey) {
const response = await fetch(
`https://api.reqme.co/clients/create-client-session?apiKey=${apiKey}`,
)
if (!response.ok) {
throw new Error('Failed to fetch session token')
}
const data = await response.json()
return data.sessionToken
}
const apiKey = 'YOUR_API_KEY' // Replace with your actual API key
document.addEventListener('DOMContentLoaded', async function () {
try {
const token = await fetchSessionToken(apiKey)
window.ReqMe.init({
sessionToken: token,
version: 'v2',
buttonVersion: 'v3',
})
} catch (error) {
console.error('Widget initialization failed:', error)
}
})
</script>
</body>
</html>Integration with Popular Platforms #
Custom HTML Websites #
For static HTML websites, simply add the code directly to your HTML files as shown above.
React Applications #
For React applications, install the widget in your component:
import { useEffect } from "react";
function App() {
useEffect(() => {
// Load ReqMe script
const script = document.createElement("script");
script.src = "https://app.reqme.co/js/widget.min.js";
script.onload = async () => {
const apiKey = "YOUR_API_KEY";
const { sessionToken } = await fetch(
`https://api.reqme.co/requests/create-client-session?apiKey=${apiKey}`
).then((r) => r.json());
window.ReqMe.init({
sessionToken,
});
};
document.head.appendChild(script);
}, []);
return (
<div className="App">
<h1>My Website</h1>
<div id="reqme-widget-container"></div>
</div>
);
}Wix Platform #
On Wix platform, add the code through “Add → Embed → HTML”:
- Go to your site editor
- Click “Add” → “Embed” → “HTML”
- Paste the initialization code
- Save changes
Shopify #
In Shopify, add the code to your theme.liquid file:
- Go to “Online Store” → “Themes”
- Click “Actions” → “Edit code”
- Add the script to the
<head>section - Save the file
Squarespace #
For Squarespace websites:
- Go to Settings → Advanced → Code Injection
- Add the ReqMe script to the Header section
- Add the initialization code to the Footer section
Troubleshooting Common Issues #
Widget Not Appearing #
- ✅ Check if the script loads correctly
- ✅ Open browser console (F12) and check for JavaScript errors
- ✅ Ensure the API key is entered correctly
- ✅ Verify the container div exists on the page
Widget Not Opening #
- ✅ Verify the API key is correct
- ✅ Check for conflicts with other scripts on your site
- ✅ Ensure ad blockers aren’t blocking the widget
- ✅ Check browser console for error messages
Display Issues #
- ✅ Check your site’s CSS styles for conflicts
- ✅ Ensure the widget’s z-index isn’t covered by other elements
- ✅ Verify the widget container isn’t hidden by CSS
Performance Concerns #
- ✅ The widget loads asynchronously and won’t affect page speed
- ✅ Script is optimized and cached for fast loading
- ✅ Widget only initializes when needed
Advanced Configuration Options #
Event Callbacks #
Monitor widget interactions with custom callbacks:
window.ReqMe.init({
sessionToken: "GENERATED_FROM_API",
onOpen: function() {
console.log('Widget opened');
// Your custom code
},
onSubmit: function(data) {
console.log('Form submitted', data);
// Your analytics tracking
}
});Multiple Language Support #
Configure the widget for different languages:
window.ReqMe.init({ sessionToken: "GENERATED_FROM_API", language: "en", // en, es, fr, de, etc.
});Security Best Practices #
API Key Management #
- ✅ Keep your API key secure and don’t expose it in public repositories
- ✅ Use environment variables for API keys in development
- ✅ Regularly rotate API keys from your ReqMe dashboard
Content Security Policy (CSP) #
If your site uses CSP, add the following directives:
script-src 'self' https://app.reqme.co;
connect-src 'self' https://api.reqme.co;Testing Your Integration #
Verification Checklist #
- ✅ Widget button appears on your website
- ✅ Clicking the button opens the widget form
- ✅ Form submission works correctly
- ✅ You receive notifications in your ReqMe dashboard
- ✅ Widget works on mobile devices
- ✅ No JavaScript errors in browser console
Testing Different Scenarios #
- Desktop Testing: Verify widget functionality on desktop browsers
- Mobile Testing: Test responsiveness on mobile devices
- Form Submission: Submit test requests and verify they appear in dashboard
- Cross-browser Testing: Test on Chrome, Firefox, Safari, and Edge
Analytics and Tracking #
Built-in Analytics #
ReqMe automatically tracks:
- Widget impressions
- Open rates
- Submission rates
- Response times
- Customer satisfaction scores
Integration with Google Analytics #
Track widget interactions in GA4:
window.ReqMe.init({
apiKey: "YOUR_API_KEY",
onOpen: function() {
gtag('event', 'widget_opened', {
'event_category': 'ReqMe',
'event_label': 'Widget Interaction'
});
}
});Frequently Asked Questions #
Q: Does the widget affect my website’s loading speed? A: ReqMe Widget is optimized for fast loading and won’t impact your site’s performance. It loads asynchronously and only when needed.
Q: Can I use the widget on multiple websites? A: Yes, you can use one API key across multiple domains. Configure domain settings in your ReqMe dashboard.
Q: Does the widget work on mobile devices? A: Yes, the widget is fully responsive and optimized for all device types including smartphones and tablets.
Q: What happens if ReqMe servers are down? A: The widget degrades gracefully. If our servers are unavailable, the widget won’t interfere with your site’s functionality.
Getting Help #
Need assistance? Our support team is here to help:
- 💬 Live Chat: Available on our website
- 📧 Email Support: hi@reqme.co
- 📚 Documentation: Comprehensive guides and tutorials
- 🎥 Video Tutorials: Step-by-step integration videos
Useful Links:
Ready to get started? Get your API key and start integrating ReqMe Widget today. Transform your website visitors into customers with intelligent request management.
