Ravak Configurator
    Preparing search index...

    Interface ConfiguratorInitOptions

    interface ConfiguratorInitOptions {
        consumer?: string;
        language?: string;
        preset?: string;
        analyticsPlugins?: AnalyticsPlugin[];
        analyticsStaticEventPayload?: { [key: string]: string | number | boolean };
        containerWidth?: string;
        heightOffset?: string;
        topOffset?: string;
        checkoutInitCallback?: CheckoutInitCallback;
        checkoutItemAmountsCallback?: CheckoutItemAmountsCallback;
        checkoutContactDetailsCallback?: CheckoutContactDetailsCallback;
        checkoutSecondaryButtonsConfigurationSummary?: CheckoutSecondaryButton<
            CheckoutItemAmountsCallback,
        >[];
        checkoutSecondaryButtonsContactDetails?: CheckoutSecondaryButton<
            CheckoutContactDetailsCallback,
        >[];
        checkoutFieldLabelAddress?: string;
        checkoutFieldLabelCity?: string;
        checkoutFieldLabelCountry?: string;
        checkoutFieldLabelEmail?: string;
        checkoutFieldLabelMessage?: string;
        checkoutFieldLabelNameAndSurname?: string;
        checkoutFieldLabelPhone?: string;
        checkoutFieldLabelZipCode?: string;
        checkoutHeaderTitleConfigurationSummary?: string;
        checkoutHeaderTitleContactDetails?: string;
        checkoutHeaderTitleFinished?: string;
        checkoutPrimaryActionButtonLabelConfigurationSummary?: string;
        checkoutPrimaryActionButtonLabelContactDetails?: string;
        checkoutPrimaryActionButtonLabelFinished?: string;
        checkoutSentSuccesfullyBannerDescription?: string;
        checkoutSentSuccesfullyBannerTitle?: string;
        startCheckoutButtonLabel?: string;
        treatCheckoutAsMerchantQuestion?: boolean;
    }
    Index
    consumer? language? preset?

    Analytics

    Properties allowing to customize where and what analytics properties are sent. For a full list of events, see AnalyticsEvent. For the accompanying analytics props of each event, see AnalyticsEventWithProps.

    analyticsPlugins? analyticsStaticEventPayload?

    Appearance

    Properties allowing to customize the appearance of the configurator. Useful for adjusting the layout and styling of the configurator to match the design of the website.

    Most appearance-related properties can also be set using CSS variables. If both are provided, CSS variables take precedence.

    containerWidth? heightOffset? topOffset?

    Checkout Process

    Properties that can be used for custom handling of the checkout process or just to get some information from the checkout process.

    Order of the checkout process is as follows:

    1. User chooses the configuration, sets the total amount of requested sets and initializes the checkout process by clicking the checkout button in the configuration summary.
    2. The checkoutInitCallback is called and awaited. If the callback was specified and returned false, the process stops here.
    3. User customizes requested amounts for each individual item in the set and proceeds to the next step by clicking the primary button in the footer of the checkout form. If specified by checkoutSecondaryButtonsConfigurationSummary, the user is able to proceed by clicking one of the secondary buttons, calling its callback in the next step instead.
    4. The checkoutItemAmountsCallback is called and awaited. If the callback was specified and returned false, the process stops here.
    5. User fills in their contact details and proceeds to the next step by clicking the primary button in the footer of the checkout form. If specified by checkoutSecondaryButtonsContactDetails, the user is able to proceed by clicking one of the secondary buttons, calling its callback in the next step instead. Process does not continue until the contact details are valid.
    6. The checkoutContactDetailsCallback is called and awaited. If the callback was specified and returned false, the process stops here.
    7. The checkout is treated as a generic demand and is sent to the API resulting in an email being sent to the configured email address. The user is presented with checkout result screen.
    checkoutInitCallback? checkoutItemAmountsCallback? checkoutContactDetailsCallback? checkoutSecondaryButtonsConfigurationSummary? checkoutSecondaryButtonsContactDetails?

    Texts (deprecated)

    Use texts parameter of RavakConfigurator.init instead

    Properties allowing to customize some of the texts displayed in the configurator. You need to handle the translations yourself and provide the text in the desired language.

    checkoutFieldLabelAddress? checkoutFieldLabelCity? checkoutFieldLabelCountry? checkoutFieldLabelEmail? checkoutFieldLabelMessage? checkoutFieldLabelNameAndSurname? checkoutFieldLabelPhone? checkoutFieldLabelZipCode? checkoutHeaderTitleConfigurationSummary? checkoutHeaderTitleContactDetails? checkoutHeaderTitleFinished? checkoutPrimaryActionButtonLabelConfigurationSummary? checkoutPrimaryActionButtonLabelContactDetails? checkoutPrimaryActionButtonLabelFinished? checkoutSentSuccesfullyBannerDescription? checkoutSentSuccesfullyBannerTitle? startCheckoutButtonLabel?

    Other

    treatCheckoutAsMerchantQuestion?
    consumer?: string

    Consumer identifier for resolution of product prices, availability and more. For example "ravak-cz"

    language?: string

    Language used for localization of the configurator. For example "en"

    If not provided, the language of the website is used, which is determined by the lang attribute of the <html> element.

    preset?: string

    Identifier of the initial preset configuration. The default preset will be used if not specified.

    Analytics

    analyticsPlugins?: AnalyticsPlugin[]

    List of additional analytics plugins to be used by the configurator

    The array should contain valid AnalyticsPlugin instances compatible with npm package analytics. This property enables integrating analytics with your own system.

    Note: The provided plugins are appended to the default set, not replacing them.

      import type { AnalyticsPlugin } from 'analytics';
      import googleTagManager from '@analytics/google-tag-manager';

      const analyticsPlugins: AnalyticsPlugin[] = [googleTagManager({ containerId: 'GTM-xyz123' })];
    analyticsStaticEventPayload?: { [key: string]: string | number | boolean }

    Static payload to be added to every analytics event

      { ab_test_identifier: 'variant_a' }

    Appearance

    containerWidth?: string

    Maximum width that the inner content should visually take-up. For example 1600px or max(1232px, 80vw)

    Useful for matching the apparent width of the configurator to the width of the adjacent container on the website where it is displayed.

    Can also be set using CSS variable --configurator-container-width.

    heightOffset?: string

    Offset of the configurator's height to the full viewport height

    Useful for adjusting configurator's apparent height while compensating for sticky headers or anchored titles on the website where it is displayed. For example 180px on 1000px tall viewport would result in 820px tall configurator. Should not be changed dynamicaly, as that would result in unpleasant movement of the UI.

    Can also be set using CSS variable --configurator-height-offset.

    topOffset?: string

    Offset of the inner UI elements from the top edge of the viewport when scrolling

    Useful for adjusting for sticky headers on the website where it is displayed. Should the height of the sticky header change dynamically, this option should be adjusted accordingly (using CSS variable below) so that the UI never hides behind the sticky header.

    Can also be set using CSS variable --configurator-top-offset.

    Checkout Process

    checkoutInitCallback?: CheckoutInitCallback

    Callback that can be called when the user initializes the checkout process

    checkoutItemAmountsCallback?: CheckoutItemAmountsCallback

    Callback that can be called after the user decided how many items they want

    checkoutContactDetailsCallback?: CheckoutContactDetailsCallback

    Callback that can be called after the user successfully submitted their contact details

    checkoutSecondaryButtonsConfigurationSummary?: CheckoutSecondaryButton<
        CheckoutItemAmountsCallback,
    >[]

    Additional secondary buttons displayed in the footer of the checkout form during configuration summary where the user can decide how many items they want

    checkoutSecondaryButtonsContactDetails?: CheckoutSecondaryButton<
        CheckoutContactDetailsCallback,
    >[]

    Additional secondary buttons displayed in the footer of the checkout form while the user fills in their contact details

    Texts (deprecated)

    checkoutFieldLabelAddress?: string

    Label of the Address field in checkout

    Use texts parameter of RavakConfigurator.init with key checkout.contactDetailsForm.fields.address.label instead

    checkoutFieldLabelCity?: string

    Label of the City field in checkout

    Use texts parameter of RavakConfigurator.init with key checkout.contactDetailsForm.fields.city.label instead

    checkoutFieldLabelCountry?: string

    Label of the Country field in checkout

    Use texts parameter of RavakConfigurator.init with key checkout.contactDetailsForm.fields.country.label instead

    checkoutFieldLabelEmail?: string

    Label of the Email field in checkout

    Use texts parameter of RavakConfigurator.init with key checkout.contactDetailsForm.fields.email.label instead

    checkoutFieldLabelMessage?: string

    Label of the Message field in checkout

    Use texts parameter of RavakConfigurator.init with key checkout.contactDetailsForm.fields.message.label instead

    checkoutFieldLabelNameAndSurname?: string

    Label of the Name and surname field in checkout

    Use texts parameter of RavakConfigurator.init with key checkout.contactDetailsForm.fields.nameAndSurname.label instead

    checkoutFieldLabelPhone?: string

    Label of the Phone field in checkout

    Use texts parameter of RavakConfigurator.init with key checkout.contactDetailsForm.fields.phone.label instead

    checkoutFieldLabelZipCode?: string

    Label of the Zip code field in checkout

    Use texts parameter of RavakConfigurator.init with key checkout.contactDetailsForm.fields.zipCode.label instead

    checkoutHeaderTitleConfigurationSummary?: string

    Title of the first step of a checkout (configuration summary)

    If set to an empty string, the checkout form won't have a header during first step. If both this and checkoutHeaderTitleContactDetails are set and not same and checkoutItemAmountsCallback is not provided, the header will be displayed as a step indicator.

    Use texts parameter of RavakConfigurator.init with key checkout.headerTitles.configurationSummary instead

    checkoutHeaderTitleContactDetails?: string

    Title of the second step of a checkout (contact details)

    If set to an empty string, the checkout form won't have a header during second step. If both this and checkoutHeaderTitleConfigurationSummary are set and not same and checkoutItemAmountsCallback is not provided, the header will be displayed as a step indicator.

    Use texts parameter of RavakConfigurator.init with key checkout.headerTitles.contactDetails instead

    checkoutHeaderTitleFinished?: string

    Title of the final screen of a checkout

    If set to an empty string, the checkout result screen won't have a header.

    Use texts parameter of RavakConfigurator.init with key checkout.headerTitles.finished instead

    checkoutPrimaryActionButtonLabelConfigurationSummary?: string

    Label of the primary button during the first step of a checkout (configuration summary)

    By default it continues to the second step (contact details), unless stopped by checkoutItemAmountsCallback.

    Use texts parameter of RavakConfigurator.init with key checkout.buttonLabels.continue instead

    checkoutPrimaryActionButtonLabelContactDetails?: string

    Label of the primary button during the second step of a checkout (contact details)

    By default it sends the data and displays the result screen, unless stopped by checkoutContactDetailsCallback.

    Use texts parameter of RavakConfigurator.init with key checkout.buttonLabels.send instead

    checkoutPrimaryActionButtonLabelFinished?: string

    Label of the primary button on the final screen of a checkout that closes the dialog

    Use texts parameter of RavakConfigurator.init with key checkout.buttonLabels.finish instead

    checkoutSentSuccesfullyBannerDescription?: string

    Description of the Sent Sucessfully banner in the final screen of a checkout

    Use texts parameter of RavakConfigurator.init with key checkout.sentSuccesfully.description instead

    checkoutSentSuccesfullyBannerTitle?: string

    Title of the Sent Sucessfully banner in the final screen of a checkout

    Use texts parameter of RavakConfigurator.init with key checkout.sentSuccesfully.title instead

    startCheckoutButtonLabel?: string

    Label of the button that starts the checkout process

    Use texts parameter of RavakConfigurator.init with key configuration.summary.startCheckoutButtonLabel instead

    Other

    treatCheckoutAsMerchantQuestion?: boolean

    When true, makes the checkout appear as sending a question to a merchant instead sending binding demand

    Presets values to options checkoutFieldLabelMessage, checkoutSentSuccesfullyBannerTitle and checkoutSentSuccesfullyBannerDescription unless they have manually set values. If checkoutItemAmountsCallback is also specified, a button will be added to checkoutSecondaryButtonsConfigurationSummary.

    Settings

    Member Visibility

    On This Page

    consumerlanguagepreset
    Analytics
    Appearance
    Checkout Process
    Texts (deprecated)
    Other