Back to Documentation

Customizing the Widget

Tailor the survey widget to match your website's design.

Position Options

Choose where the widget button appears:

AitochaSurvey.init({
  surveyId: 'YOUR_SURVEY_ID',
  position: 'bottom-right' // or 'bottom-left'
});

Custom Colors

Override the default colors to match your brand:

AitochaSurvey.init({
  surveyId: 'YOUR_SURVEY_ID',
  primaryColor: '#8B5CF6',    // Button and accent color
  backgroundColor: '#1a1a2e', // Survey background
  textColor: '#ffffff'        // Text color
});

Trigger Behavior

Control when and how the survey appears:

AitochaSurvey.init({
  surveyId: 'YOUR_SURVEY_ID',
  trigger: 'button',     // 'button', 'delay', 'exit', 'scroll'
  delay: 5000,           // For delay trigger (ms)
  scrollPercent: 50,     // For scroll trigger (%)
  hideButton: false      // Hide the floating button
});

Trigger Types

Button (default)

Shows floating button, opens on click

Delay

Auto-opens after specified milliseconds

Exit Intent

Opens when user moves to leave page

Scroll

Opens after scrolling percentage

JavaScript API

Control the widget programmatically:

// Open the survey
AitochaSurvey.open();

// Close the survey
AitochaSurvey.close();

// Check if open
const isOpen = AitochaSurvey.isOpen();

// Listen for events
AitochaSurvey.on('submit', (data) => {
  console.log('Survey submitted:', data);
});

AitochaSurvey.on('close', () => {
  console.log('Survey closed');
});

Hiding Branding

On Pro and Business plans, remove the "Powered by" badge:

AitochaSurvey.init({
  surveyId: 'YOUR_SURVEY_ID',
  removeBranding: true
});

Need Custom Integration?

Check out our website and mobile integration guides.