Widget Configuration

Customize how the SimpleCommenter widget behaves on your website using data attributes and JavaScript API.

Data Attributes

Configure the widget by adding data attributes to the script tag:

<script
  src="https://simplecommenter.com/js/comments.min.js"
  data-domain="your-domain.com"
  data-position="bottom-right"
  data-color="#3B82F6"
  defer
></script>

All Available Attributes

Name
data-domain
Type
string
Description
Your registered domain. Must match exactly what's in your dashboard.
Name
data-position
Type
string
Description
Position of the widget button. Options: bottom-right, bottom-left, top-right, top-left. Default: bottom-right
Name
data-color
Type
string
Description
Primary accent color as a hex code. Default: #3B82F6
Name
data-button-text
Type
string
Description
Text displayed on the feedback button. Default: Feedback
Name
data-hide-button
Type
boolean
Description
Set to true to hide the default button. Useful when using custom triggers.
Name
data-screenshot
Type
boolean
Description
Enable or disable screenshot capture. Default: true
Name
data-email-required
Type
boolean
Description
Make the email field required. Default: false

JavaScript API

For more control, use the JavaScript API after the widget loads:

// Wait for widget to load
window.addEventListener("SimpleCommenterLoaded", function () {
  // Access the widget API
  const widget = window.SimpleCommenter;

  // Open the widget programmatically
  widget.open();

  // Close the widget
  widget.close();

  // Toggle the widget
  widget.toggle();
});

Custom Trigger Button

Hide the default button and use your own:

<script
  src="https://simplecommenter.com/js/comments.min.js"
  data-domain="your-domain.com"
  data-hide-button="true"
  defer
></script>

<button onclick="window.SimpleCommenter.open()">Give Feedback</button>

Pre-fill User Data

If you have user information, pre-fill the form:

window.addEventListener("SimpleCommenterLoaded", function () {
  window.SimpleCommenter.setUser({
    email: "user@example.com",
    name: "John Doe",
  });
});

Events

Listen for widget events:

window.addEventListener("SimpleCommenterLoaded", function () {
  // When user opens the widget
  window.SimpleCommenter.on("open", function () {
    console.log("Widget opened");
  });

  // When user closes the widget
  window.SimpleCommenter.on("close", function () {
    console.log("Widget closed");
  });

  // When feedback is submitted
  window.SimpleCommenter.on("submit", function (data) {
    console.log("Feedback submitted:", data);
  });
});

Event listeners are useful for analytics integration or triggering other actions when users interact with the widget.