Bugsnap Customization Guide

Bugsnap offers a range of customization options to ensure the widget fits seamlessly into your website's design and user experience. Here's a detailed guide on each customization option:

1. Trigger Visibility

Description: Controls whether the default button that opens the Bugsnap widget is visible or not.

Options:

• true: Shows the default Bugsnap button.
• false: Hides the default button, useful if you want to design and create your own trigger button.

Example:

_bugsnapWidget("init", {
  api_key: "YOUR_API_KEY",
  trigger: true,
});

2. Widget Position

Description: Determines the position of the widget and the trigger button on the page.

Options:

• left: Positions the widget in the bottom-left corner.
• centre: Centers the widget at the bottom.
• right: Positions the widget in the bottom-right corner.

Example:

_bugsnapWidget("init", {
  api_key: "YOUR_API_KEY",
  position: "right",
});

3. Trigger Button Size

Description: Adjusts the size of the trigger button.

Options:

• small: Displays a smaller button.
• medium: Default size.
• large: Displays a larger button.

Example:

_bugsnapWidget("init", {
  api_key: "YOUR_API_KEY",
  size: "large",
});

4. Offset

Description: Controls the distance of the trigger from the side edges of the screen. It's measured in pixels.

Example:

_bugsnapWidget("init", {
  api_key: "YOUR_API_KEY",
  offset: 50,
});

5. User Feedback

Description: Allows you to display a custom message to the website visitor once they submit a report via the Bugsnap widget.

Options:

• user_feedback_title: The title of the feedback message.
• user_feedback_body: The main content of the feedback message.

Example:

_bugsnapWidget("init", {
  api_key: "YOUR_API_KEY",
  user_feedback: {
    user_feedback_title: "Thank you!",
    user_feedback_body: "Your feedback is invaluable to us.",
  },
});

6. Current User Details

Description: Helps in extending the bug report by adding details of the logged-in user of the website that integrated Bugsnap.

Options:

• current_user_id: Represents the logged-in user's ID.
• current_user_email: Represents the logged-in user's email.

Example:

_bugsnapWidget("init", {
  api_key: "YOUR_API_KEY",
  current_user_id: "12345",
  current_user_email: "user@example.com",
});

With these customization options, you can ensure that Bugsnap not only functions optimally but also aligns with the aesthetics and user experience of your website. If you have any questions or need further customization options, don't hesitate to reach out to our support team at support@bugsnap.io.