SurveyBanner

Top or bottom strip that renders when the survey is visible, with sticky positioning, intent variants, and an optional dismiss button

SurveyBanner renders a horizontal strip at the top or bottom of the viewport. It returns null when survey.state.isVisible is false, so no portal or dialog wrapping is needed.

Import

import { SurveyBanner } from '@tour-kit/surveys';

Usage

import { SurveyBanner, QuestionBoolean, useSurvey } from '@tour-kit/surveys';

function FeedbackBanner() {
  const survey = useSurvey('quick-csat');

  return (
    <SurveyBanner
      surveyId="quick-csat"
      position="top"
      sticky
      intent="feedback"
    >
      <QuestionBoolean
        id="satisfied"
        label="Are you satisfied with this page?"
        yesLabel="Yes"
        noLabel="No"
        onChange={(value) => {
          survey.answer('satisfied', value);
          survey.complete();
        }}
      />
    </SurveyBanner>
  );
}

Props

Prop

Type

Variants

Variant	Values	Default
`position`	`'top'` `'bottom'`	`'top'`
`intent`	`'info'` `'feedback'`	`'info'`
`sticky`	`true` `false`	`false`

Compound variant: position='top' + sticky=true → top-0; position='bottom' + sticky=true → bottom-0.

BannerOptions defaults

{
  position: 'top',
  sticky: false,
  dismissable: true,
  intent: 'info',
}

The dismissable option controls whether the dismiss button renders. Clicking it calls survey.dismiss('close_button').