Back to Documentation
Website Integration
Integrate surveys seamlessly into your website workflow.
Integration Methods
1. Floating Widget
The default integration shows a floating button that opens the survey.
<script src="https://aitochasurveys.com/widget.js"></script>
<script>
AitochaSurvey.init({ surveyId: 'YOUR_ID' });
</script>2. Inline Embed
Embed the survey directly within your page content.
<div id="survey-container"></div>
<script src="https://aitochasurveys.com/widget.js"></script>
<script>
AitochaSurvey.embed({
surveyId: 'YOUR_ID',
container: '#survey-container'
});
</script>3. Custom Trigger
Open the survey programmatically with your own button.
<button onclick="AitochaSurvey.open()">
Give Feedback
</button>
<script src="https://aitochasurveys.com/widget.js"></script>
<script>
AitochaSurvey.init({
surveyId: 'YOUR_ID',
hideButton: true // Hide default button
});
</script>Single Page Apps (React, Vue, Angular)
For SPAs, initialize the widget after your app mounts:
React Example:
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://aitochasurveys.com/widget.js';
script.onload = () => {
window.AitochaSurvey.init({
surveyId: 'YOUR_ID'
});
};
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);Passing User Data
Pre-fill respondent information:
AitochaSurvey.init({
surveyId: 'YOUR_ID',
user: {
email: 'user@example.com',
name: 'John Doe',
customerId: '12345'
}
});Event Callbacks
Listen for survey events:
AitochaSurvey.on('open', () => {
analytics.track('Survey Opened');
});
AitochaSurvey.on('submit', (response) => {
analytics.track('Survey Submitted', {
rating: response.rating
});
});
AitochaSurvey.on('close', () => {
analytics.track('Survey Closed');
});