posthog-js/lib/src/extensions/surveys/surveys-extension-utils.d.ts

Posthog-js allows you to automatically capture usage and send events to PostHog.

import { VNode, type JSX } from 'preact';
import { PostHog } from '../../posthog-core';
import { MultipleSurveyQuestion, Survey, SurveyAppearance, SurveyPosition, SurveyQuestion, SurveyType, SurveyWidgetType } from '../../posthog-surveys-types';
import { type SurveyResponses } from '@posthog/core';
import { getSurveyResponseKey } from '@posthog/core/surveys';
import { Properties } from '../../types';
export declare function getFontFamily(fontFamily?: string): string;
export { getSurveyResponseKey };
export declare const defaultSurveyAppearance: {
    readonly fontFamily: "inherit";
    readonly backgroundColor: "#eeeded";
    readonly submitButtonColor: "black";
    readonly submitButtonTextColor: "white";
    readonly ratingButtonColor: "white";
    readonly ratingButtonActiveColor: "black";
    readonly borderColor: "#c9c6c6";
    readonly placeholder: "Start typing...";
    readonly whiteLabel: false;
    readonly displayThankYouMessage: true;
    readonly thankYouMessageHeader: "Thank you for your feedback!";
    readonly position: "right";
    readonly widgetType: "tab";
    readonly widgetLabel: "Feedback";
    readonly widgetColor: "black";
    readonly zIndex: string;
    readonly disabledButtonOpacity: "0.6";
    readonly maxWidth: "300px";
    readonly textSubtleColor: "#939393";
    readonly boxPadding: "20px 24px";
    readonly boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)";
    readonly borderRadius: "10px";
    readonly shuffleQuestions: false;
    readonly surveyPopupDelaySeconds: undefined;
    readonly outlineColor: "rgba(59, 130, 246, 0.8)";
    readonly inputBackground: "white";
    readonly inputTextColor: "#020617";
    readonly scrollbarThumbColor: "var(--ph-survey-border-color)";
    readonly scrollbarTrackColor: "var(--ph-survey-background-color)";
};
export declare const addSurveyCSSVariablesToElement: (element: HTMLElement, type: SurveyType, appearance?: SurveyAppearance | null) => void;
export declare function hex2rgb(c: string): string;
export declare function hexToRgba(hex: string, opacity: number): string;
export declare function getContrastingTextColor(color?: string): "#020617" | "white";
export declare function getSurveyStylesheet(posthog?: PostHog): HTMLStyleElement | null;
export declare const retrieveSurveyShadow: (survey: Pick<Survey, "id" | "appearance" | "type">, posthog?: PostHog, element?: Element) => {
    shadow: ShadowRoot;
    isNewlyCreated: boolean;
};
interface SendSurveyEventArgs {
    responses: SurveyResponses;
    survey: Survey;
    surveySubmissionId: string;
    isSurveyCompleted: boolean;
    posthog?: PostHog;
    /** Additional properties to include in the survey event */
    properties?: Properties;
    /** The language that was applied to the survey. */
    surveyLanguage?: string | null;
    /** Question text as displayed to the user at answer time, keyed by question id. */
    questionSnapshots?: Record<string, string>;
}
export declare const sendSurveyEvent: ({ responses, survey, surveySubmissionId, posthog, isSurveyCompleted, properties, surveyLanguage, questionSnapshots, }: SendSurveyEventArgs) => void;
export declare const dismissedSurveyEvent: (survey: Survey, posthog?: PostHog, readOnly?: boolean, surveyLanguage?: string | null) => void;
export declare const sendSurveyAbandonedEvent: (survey: Survey, posthog?: PostHog) => void;
export declare const shuffle: (array: any[]) => any[];
export declare const getDisplayOrderChoices: (question: MultipleSurveyQuestion) => string[];
/** Question ids in the given order, or undefined when any question lacks an id to record. */
export declare const getQuestionOrder: (questions: SurveyQuestion[]) => string[] | undefined;
/**
 * Branching rules hold the position of their target question in survey.questions, so a survey that
 * uses branching is always read in the configured order. The API rejects surveys that set both
 * shuffleQuestions and branching, so that covers rows predating the validation.
 *
 * A survey the respondent has already started keeps the order its persisted indices point into.
 * Without a recorded order those indices came from a build that did not store one, and the order
 * that produced them is unknowable, so the configured order is the only safe reading.
 */
export declare const getDisplayOrderQuestions: (survey: Survey, inProgressState?: InProgressSurveyState | null) => SurveyQuestion[];
export declare const canActivateRepeatedly: (survey: Pick<Survey, "schedule" | "conditions" | "id" | "current_iteration">) => boolean;
/**
 * getSurveySeen checks local storage for the surveySeen Key a
 * and overrides this value if the survey can be repeatedly activated by its events.
 * @param survey
 */
export declare const getSurveySeen: (survey: Survey) => boolean;
export declare const hasWaitPeriodPassed: (waitPeriodInDays: number | undefined) => boolean;
interface SurveyContextProps {
    isPreviewMode: boolean;
    previewPageIndex: number | undefined;
    onPopupSurveyDismissed: () => void;
    isPopup: boolean;
    onPreviewSubmit: (res: string | string[] | number | null) => void;
    onPreviewBack: () => void;
    surveySubmissionId: string;
    /** Additional properties to include in all survey events */
    properties?: Properties;
    /** The language that was applied to the survey. */
    surveyLanguage?: string | null;
}
export declare const SurveyContext: import("preact").Context<SurveyContextProps>;
export declare const useSurveyContext: () => SurveyContextProps;
interface RenderProps {
    component: VNode<{
        className: string;
    }>;
    children: string;
    renderAsHtml?: boolean;
    style?: JSX.CSSProperties;
}
export declare const renderChildrenAsTextOrHtml: ({ component, children, renderAsHtml, style }: RenderProps) => VNode<{
    className: string;
}>;
export declare function doesSurveyUrlMatch(survey: Pick<Survey, 'conditions'>, posthog?: PostHog): boolean;
export declare function doesSurveyDeviceTypesMatch(survey: Survey): boolean;
export declare function doesSurveyMatchSelector(survey: Survey): boolean;
interface InProgressSurveyState {
    surveySubmissionId: string;
    lastQuestionIndex: number;
    questionOrder?: string[];
    visitedIndices?: number[];
    responses: SurveyResponses;
    surveyLanguage?: string | null;
    questionSnapshots?: Record<string, string>;
}
export declare const setInProgressSurveyState: (survey: Pick<Survey, "id" | "current_iteration">, state: InProgressSurveyState) => void;
export declare const getInProgressSurveyState: (survey: Pick<Survey, "id" | "current_iteration">) => InProgressSurveyState | null;
export declare const isSurveyInProgress: (survey: Pick<Survey, "id" | "current_iteration">) => boolean;
export declare const clearInProgressSurveyState: (survey: Pick<Survey, "id" | "current_iteration">) => void;
export declare function getSurveyContainerClass(survey: Pick<Survey, 'id'>, asSelector?: boolean): string;
/**
 * Get CSS position styles for a popover/modal based on SurveyPosition
 * Used by both surveys and product tours for consistent positioning
 */
export declare function getPopoverPosition(type?: SurveyType, position?: SurveyPosition, surveyWidgetType?: SurveyWidgetType): Record<string, string>;