Configuration

Opineeo provides a flexible configuration system to customize the behavior and appearance of your surveys.

Configuration Options

React Component Props (NPM Package)

When using the opineeo-widget npm package, pass configuration as React props:

import { OpineeoSurvey } from 'opineeo-widget'

<OpineeoSurvey
  surveyId="your-survey-id"
  token="your-api-token"
  userId="user-123"
  position="bottom-right"
  feedbackLabel="Give Feedback"
  customCSS=".sv { border-radius: 16px; }"
  autoClose={3000}
  onComplete={(data) => console.log('Completed:', data)}
  onClose={() => console.log('Survey closed')}
/>

All props follow the same naming convention as the JavaScript options below, but use camelCase (e.g., surveyId instead of survey-id).

JavaScript Class Options

When using the JavaScript class, pass an options object to initSurveyWidget:

const widget = window.initSurveyWidget({
    surveyId: 'your-survey-id',
    token: 'your-api-token',
    userId: 'user-123',
    position: 'bottom-right',
    feedbackLabel: 'Give Feedback',
    customCSS: '.sv { border-radius: 16px; }',
    autoClose: 3000,
    onComplete: function(data) {
        console.log('Completed:', data);
    },
    onClose: function() {
        console.log('Survey closed');
    }
});

Web Component Attributes

When using the web component, pass options as HTML attributes:

<opineeo-survey 
    survey-id="your-survey-id"
    token="your-api-token"
    user-id="user-123"
    position="bottom-right"
    feedback-label="Give Feedback"
    auto-close="3000">
</opineeo-survey>

Required Options

surveyId

• Type: string
• Required: Yes (unless using surveyData)
• Description: The unique identifier for your survey

surveyId: 'srv_abc123def456'

token

• Type: string
• Required: Yes (unless using surveyData)
• Description: Your API authentication token

token: 'tok_xyz789ghi012'

surveyData

• Type: object
• Required: Yes (alternative to surveyId + token)
• Description: Custom survey data for embedded surveys (used for self-hosted surveys)

surveyData: {
    id: 'custom-survey',
    questions: [
        {
            id: 'q1',
            title: 'How satisfied are you?',
            format: 'STAR_RATING',
            required: true
        }
    ]
}

Note: You must provide either surveyId + token OR surveyData.

Optional Options

userId

• Type: string
• Default: null
• Description: Unique identifier for the user taking the survey

userId: 'user-12345'

Use this to track responses per user and prevent duplicate submissions.

extraInfo

• Type: string
• Default: null
• Description: Enrich your data with extra information

extraInfo: 'groupid=123&prodId=456'

position

• Type: string
• Default: 'inline'
• Description: Position of the survey widget on the page
• Options: 'inline', 'top-right', 'top-left', 'bottom-right', 'bottom-left'

position: 'bottom-right'

Inline Position (default):

position: 'inline'  // Survey embeds directly in the page

Floating Positions:

position: 'top-right'     // Floating widget in top-right corner
position: 'top-left'      // Floating widget in top-left corner
position: 'bottom-right'  // Floating widget in bottom-right corner
position: 'bottom-left'   // Floating widget in bottom-left corner

When using floating positions, a trigger button will appear that users can click to open the survey. The survey appears as an overlay with a close button.

feedbackLabel

• Type: string
• Default: 'Give Feedback'
• Description: Text displayed on the trigger button (only used with floating positions)

feedbackLabel: 'Share Your Feedback'

This option is ignored when position is set to 'inline'.

Examples:

// Customer feedback button
position: 'bottom-right',
feedbackLabel: 'Help Us Improve'

// Support survey button  
position: 'top-left',
feedbackLabel: 'Contact Support'

customCSS

• Type: string
• Default: ''
• Description: Custom CSS to style the survey widget

customCSS: `
    .sv {
        background: #f0f0f0;
        border-radius: 12px;
    }
    .btnp {
        background: #4F46E5;
    }
`

See the Examples section for styling examples.

autoClose

• Type: number
• Default: 0
• Description: Auto-close delay in milliseconds after survey completion (0 = no auto-close)

autoClose: 3000  // Close after 3 seconds

onComplete

• Type: function
• Default: null
• Description: Callback function called when survey is completed

onComplete: function(data) {
    console.log('Survey completed');
    console.log('Responses:', data.responses);
    // Send data to your analytics
}

The data object contains:

• surveyId: The survey ID
• responses: Array of response objects
• userId: The user ID (if provided)
• completedAt: Timestamp of completion

onClose

• Type: function
• Default: null
• Description: Callback function called when survey is closed (completed or dismissed)

onClose: function() {
    console.log('Survey closed');
    // Perform cleanup
}

Survey Data Structure

When using custom surveyData, structure it as follows:

{
    id: 'survey-id',
    questions: [
        {
            id: 'question-id',
            title: 'Question text',
            description: 'Optional description',
            format: 'QUESTION_TYPE',
            required: true,
            // Additional options based on question type
        }
    ]
}

Question Types

YES_NO

{
    id: 'recommend',
    title: 'Would you recommend us?',
    format: 'YES_NO',
    required: true,
    yesLabel: 'Yes',
    noLabel: 'No'
}

SINGLE_CHOICE

{
    id: 'frequency',
    title: 'How often do you use our product?',
    format: 'SINGLE_CHOICE',
    required: true,
    options: [
        { id: 'daily', text: 'Daily' },
        { id: 'weekly', text: 'Weekly' },
        { id: 'monthly', text: 'Monthly' }
    ]
}

MULTIPLE_CHOICE

{
    id: 'features',
    title: 'Which features do you use?',
    format: 'MULTIPLE_CHOICE',
    required: false,
    options: [
        { id: 'analytics', text: 'Analytics' },
        { id: 'reports', text: 'Reports' },
        { id: 'integrations', text: 'Integrations' },
        { id: 'other', text: 'Other', isOther: true }
    ]
}

STAR_RATING

{
    id: 'satisfaction',
    title: 'Rate your experience',
    format: 'STAR_RATING',
    required: true
}

LONG_TEXT

{
    id: 'feedback',
    title: 'Additional comments',
    description: 'Please share any additional feedback',
    format: 'LONG_TEXT',
    required: false
}

STATEMENT

{
    id: 'info',
    title: 'Thank you for your time!',
    description: 'Your feedback helps us improve.',
    format: 'STATEMENT'
}

CSS Class Names

Opineeo uses the following CSS classes that you can customize:

• .sv - Survey container
• .sv-question - Question container
• .sv-title - Question title
• .sv-description - Question description
• .btnp - Primary button
• .btns - Secondary button
• .star-svg - Star rating SVG
• .option-btn - Option button
• .textarea-input - Text area input

Example Configurations

Minimal Configuration

const widget = window.initSurveyWidget({
    surveyId: 'srv_abc123',
    token: 'tok_xyz789'
});

Full Configuration

const widget = window.initSurveyWidget({
    surveyId: 'srv_abc123',
    token: 'tok_xyz789',
    userId: 'user-12345',
    extraInfo: 'featureID=xyz',
    position: 'bottom-right',
    feedbackLabel: 'Give Feedback',
    customCSS: '.sv { border-radius: 16px; }',
    autoClose: 5000,
    onComplete: function(data) {
        console.log('Survey completed:', data);
        fetch('/api/survey-completed', {
            method: 'POST',
            body: JSON.stringify(data)
        });
    },
    onClose: function() {
        console.log('Survey closed');
    }
});

Next Steps

Check out the Examples section to see these configurations in action!