Boei SDK Usage Guide

Boei's SDK allows you to dynamically configure and customize your Boei widget. Here's how to use it:

Setup

First, include the Boei initialization code in your script:

window.BQ=window.BQ||[];window.Boei=window.Boei||function(u){BQ.push(u)};

General Settings

Use Boei() to modify global settings:

Boei({brand_background: 'green'});

Key Variables:

• brand_background: Set the background color of the widget
• brandcolor: Set the primary brand color
• brandcolor_text: Set the text color for brand elements
• button_hover_label: Set the label that appears on button hover
• position: Set the widget position ('bottom_left', 'bottom_right', 'top_left', 'top_right')
• shape: Set the widget shape ('circle', 'square')

Adding Channels

Add new channels to your widget:

Boei({add_channel: {
    type: "link",
    title: "External Website Link",
    url: "https://boei.help",
    options: {
        new_window: true,
        custom_conversion_label: 'Custom' // Can be null for default
    },
    position: 2 // The position in the widget
}});

Channel Properties:

• type: Channel type (e.g., "link", "form", "chat")
• title: Display title for the channel
• url: URL for link channels
• options: Additional settings (optional)
  • new_window: Open link in new window (boolean)
  • custom_conversion_label: Custom label for conversion tracking
• position: Position in the widget (integer)

Multiple changes

You can chain multiple configurations:

Boei({brand_background: 'green'});
Boei({add_channel: {...}});
Boei({button_hover_label: 'Need Help?'});

Remember, settings are applied in the order they are called, with later calls potentially overwriting earlier ones.

List of Editable Variables

Here's a comprehensive list of variables you can edit using Boei SDK:

General Appearance

• brand_background: Background color or gradient for the widget
• brandcolor: Primary brand color
• brandcolor_text: Text color for brand elements
• button_hover_label: Label that appears on button hover
• position: Widget position ('bottom_left', 'bottom_right', 'top_left', 'top_right')
• shape: Widget shape ('circle', 'square')
• opacity: Widget opacity (0 to 1)
• button_icon_size: Size of the button icon
• button_width: Width of the button
• button_height: Height of the button
• button_margin_x: Horizontal margin for the button
• button_margin_y: Vertical margin for the button

Widget Behavior

• trigger_after_seconds: Time in seconds before triggering the widget
• trigger_message: Message to display when widget is triggered
• trigger_message_only_new_visitor: Show trigger message only for new visitors (boolean)
• close_trigger_after_seconds: Time in seconds before closing the trigger message
• auto_open_after_seconds: Time in seconds before automatically opening the widget
• auto_open_only_new_visitor: Auto-open only for new visitors (boolean)
• notification_badge_after_seconds: Time in seconds before showing a notification badge
• glow_after_seconds: Time in seconds before applying a glow effect
• glow_duration_seconds: Duration of the glow effect in seconds
• glow_color: Color of the glow effect

Customization

• custom_css: Custom CSS to apply to the widget
• icon_svg: Custom SVG icon for the widget button
• button_image: Custom image for the widget button
• close_src: Custom image for the close button
• loading_src: Custom loading image

Functionality

• test_mode: Enable test mode (boolean)
• allow_identifiers: Allow user identifiers (boolean)
• direct_open_when_one_channel: Directly open single channel (boolean)
• display_button_watermark: Show button watermark (boolean)
• display_helper_watermark: Show helper watermark (boolean)
• display_close_trigger_message: Show close button on trigger message (boolean)
• display_countdown_timer: Show countdown timer (boolean)
• display_countdown_timer_seconds_left: Seconds left for countdown timer
• hide_on_pages: List of pages to hide the widget on
• is_spa: Treat as Single Page Application (boolean)

Analytics and Integrations

• use_google_analytics4: Use Google Analytics 4 (boolean)
• use_plausible_analytics: Use Plausible Analytics (boolean)
• use_google_tag_manager: Use Google Tag Manager (boolean)
• use_simple_analytics: Use Simple Analytics (boolean)
• use_facebook_pixel: Use Facebook Pixel (boolean)

Channel-specific (used with add_channel)

• type: Channel type (e.g., "link", "form", "chat")
• title: Display title for the channel
• url: URL for link channels
• options: Additional channel-specific options
  • new_window: Open link in new window (boolean)
  • custom_conversion_label: Custom label for conversion tracking

Remember, not all variables may be applicable to every use case.