Saber Feedback Documentation

Run-time Options

With Saber’s run-time options, you can specify options for the feedback button and interface at run-time. This allows you to easily have different options for different pages, or depending on Javascript conditions.

Note: Run-time options will always take priority over the options you specify in the website settings section of the control panel.

Run-time options are set in the saber_options global object in your embed code, along with the required API key:


language string

Default: 'en'

This specifies the language in which the user interface should be displayed, the value must be a 2 character language code, and can be any of the following:
  • en – English (default)
  • cz – Czech
  • de – German
  • dk – Danish
  • es – Spanish
  • fr – French
  • hu – Hungarian
  • it – Italian
  • nl – Dutch
  • pt – Portuguese
  • ru – Russian
  • se – Swedish
  • tr – Turkish

Example:

var saber_options = {
  api_key: "[YOUR API KEY HERE]",
  language: 'fr' // Set the language to 'French'
};

position string

Default: 'right'

Can be either 'left' or 'right'. Set this to 'left' if you would like the feedback button to display on the left hand side of the screen.

Example:

var saber_options = {
  api_key: "[YOUR API KEY HERE]",
  position: 'left'
};

style string

Default: 'label'

Can be either 'label' or 'tab'. Set this to 'tab' if you would like the feedback button to be displayed horizontally on the bottom of the screen, instead of vertically at the side of the screen.

Example:

var saber_options = {
  api_key: "[YOUR API KEY HERE]",
  style: 'tab'
};

label_text string

Default: 'Feedback'

Modify this to change the label text on the feedback button. If you do not define this, the default of 'Feedback' will be used, and will be translated to the appropriate language if you set the language to anything but English.

Example:

var saber_options = {
  api_key: "[YOUR API KEY HERE]",
  label_text: 'Report an Issue'
};

feedback_values hash

Default: null

The feedback_values hash can be used to specify default values for you feedback fields, as well as Custom Data.

The hash is in the format { field_api_name: field_value }. The field's API name can be found in the Form Builder section of the Saber control panel. Default field API names always start with an underscore.

Default feedback categories also have underscore prefixed API names which can be found in control panel when setting up your category field. This is so that the category names can be translated into other language.

Example:

var saber_options = {
  api_key: "[YOUR API KEY HERE]",
  feedback_values: {
    _email: 'matt@saberfeedback.com',
    _category: '_problem',
    user_id: 69,
  }

};

background_color string

Default: '#222222'

Controls the background color of the Feedback button. This can be any valid Hexadecimal RGB Color.

Example:

var saber_options = {
  api_key: "[YOUR API KEY HERE]",
  background_color: '#0064cd' // Blue
};

text_color string

Default: '#ffffff'

Controls the text color of the Feedback button, as well as the inner border color. This can be any valid Hexadecimal RGB Color.

Example:

var saber_options = {
  api_key: "[YOUR API KEY HERE]",
  text_color: '#0000000' // Black
};

show_help boolean

Default: true

Set this to false to hide the help screen that is usually displayed when giving specific feedback. The help will still be shown if the ? help button on the toolbox is clicked.

Example:

var saber_options = {
  api_key: "[YOUR API KEY HERE]",
  show_help: false
};

show_thanks boolean

Default: true

Set this to false to simply exit Saber as soon as feedback is sent, instead of showing the "Thanks for the Feedback!" message.

Example:

var saber_options = {
  api_key: "[YOUR API KEY HERE]",
  show_thanks: false
};

hide_button boolean

Default: false

If you set this to true, Saber will load normally, but the feedback button will not be shown. Instead you will be able to trigger Saber to open using the JavaScript API's open method.

Example:

var saber_options = {
  api_key: "[YOUR API KEY HERE]",
  hide_button: true
};

disable_event_log boolean

Default: false

If you set this to true, Saber will not log events, such as page loads, AJAX requests and Javascript errors.

Example:

var saber_options = {
  api_key: "[YOUR API KEY HERE]",
  disable_event_log: true
};

event_log_max_length integer

Default: 100

To avoid filling your browsers memory, Saber only stores the most recent 100 events. You can change this to any other number, if you'd like more or less event history to be stored.

Example:

var saber_options = {
  api_key: "[YOUR API KEY HERE]",
  event_log_max_length: 420
};

cookies hash

Beta - This feature is currently in beta, and may not always work. Please get in touch if you find any issues with it.

Default: null

Use this to set cookies on Saber's screenshot server. Eg: if your site's CSS or images require authentication, you can specify an authenticated cookie value so that the Saber screenshot server can access them.

The cookies hash should be in the format of URL: { cookie_name: cookie_value }. Multiple URLs can be specified, and each URL can have multiple cookies (see the example below).

The URL is required as the screenshot server first needs to navigate to this URL in order to set the cookie. It's best to choose a fast loading page to keep screenshot creation as quick as possible.

Please note: The URLs must be for HTML documents, as some browsers will not allow cookies to be set on images or any other non-HTML URLs.

Example:

var saber_options = {
  api_key: "[YOUR API KEY HERE]",
  cookies: {
    'http://yoursite.com': {
       cookiename:'cookievalue',
       cookie_two:'something'
    },
    'http://google.com': {
      more:'cookies'
    }
  }

};

suppress_localhost_warning boolean

Default: false

Set this to true to hide the localhost warning message that is displayed when running Saber on a local environment.

Example:

var saber_options = {
  api_key: "[YOUR API KEY HERE]",
  suppress_localhost_warning: true
};

require_email boolean

Depreciated - You can now choose whether or not to require an email address in your website's form builder within the Saber control panel.

Default: false

Set this to boolean true if you want to require an email address when sending feedback through Saber. The default value is false.

Example:

var saber_options = {
  api_key: "[YOUR API KEY HERE]",
  require_email: true
};

default_category integer

Depreciated - Use the feedback_values option instead, eg: feedback_values: { _category: '_suggestion' }"

Default: null

Set this to a valid category ID for you website to pre-select a default feedback category. You can find the category IDs in the control panel, choosing 'Feedback Categories' from the left menu, and checking the ID column from the table of categories.

Example:

var saber_options = {
  api_key: "[YOUR API KEY HERE]",
  default_category: 1234
};

prefill_email string

Depreciated - Use the feedback_values option instead, eg: feedback_values: { _email: 'matt@saberfeedback.com' }"

Default: null

Set this to define a default email address, eg: authenticated users in your web app.

Example:

var saber_options = {
  api_key: "[YOUR API KEY HERE]",
  prefill_email: 'matt@saberfeedback.com'
};

http_auth string

Depreciated - Adding HTTP Auth credentials to URLs no longer works in all browsers, instead you should use the cookies option if your site's assets require authentication."

Default: null

If your site is behind HTTP Basic authentication, you'll need to provide a username and password to allow Saber to access your images, CSS files and custom fonts, otherwise the screenshots will not render correctly. The username and password should be separated by a colon, eg: username:password

Example:

var saber_options = {
  api_key: "[YOUR API KEY HERE]",
  http_auth: 'randal:correcthorsebatterystaple'
};