survo-react-widget

Native React component for embedding Survo surveys in your application.

📖 Ver Documentação com Preview Interativo

Installation

npm install survo-react-widget

Quick Start

import { SurvoWidget } from 'survo-react-widget';

function App() {
  return (
    <SurvoWidget
      apiKey="your-api-key"
      surveyId="your-survey-id"
      display="inline"
      onComplete={(answers) => {
        console.log('Survey completed!', answers);
      }}
    />
  );
}

Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | apiKey | string | required | Your Survo API key | | surveyId | string | required | The survey ID to display | | display | 'modal' \| 'inline' | 'modal' | Display mode | | containerId | string | 'survo-widget' | Target container ID (inline mode) | | baseUrl | string | 'https://api.survo.digital' | API base URL | | onComplete | (answers: any) => void | undefined | Callback triggered after completion |

Display Modes

Inline Mode

Renders the survey directly in your component tree:

<SurvoWidget
  apiKey="your-api-key"
  surveyId="your-survey-id"
  display="inline"
/>

Modal Mode

Renders the survey as a floating modal in the bottom-right corner:

<SurvoWidget
  apiKey="your-api-key"
  surveyId="your-survey-id"
  display="modal"
/>

Getting Your Credentials

To integrate the widget, you need your API Key and the Survey ID.

1. Widget API Key

1. Log in to survo.digital
2. Navigate to Settings > Developer
3. Create or copy your API key in the Widget API Keys section

2. Survey ID

There are two ways to get the survey ID:

• Survey Dashboard: In the Surveys list, find your survey, click Actions, and select Copy ID.
• Survey Editor: Click on the survey name to edit it. You'll find a copy button next to the title.

License

MIT © Survo Digital