Widget Documentation

Contents

Comments Widget

Quick Start

Add the comments widget to your website in just a few simple steps.

Add the Widget

<!-- Add to your <head> -->
<link rel="stylesheet" href="https://www.blogextras.com/widget.css" />
<script is:inline async defer src="https://www.blogextras.com/widget.js"></script>

<!-- Add where you want the comments to appear -->
<div id="blogextras-comments" 
     data-website-id="your-website-id"
     data-page-slug="/current-page"     <!-- Optional: Defaults to current URL path -->
     data-api-url="https://www.blogextras.com">          <!-- Optional: Custom API URL -->
</div>

Configuration Options

OptionData AttributeTypeRequiredDescription
websiteIddata-website-idstringYesYour website's unique identifier from the dashboard
pageSlugdata-page-slugstringNoCurrent page identifier (defaults to URL path)
apiUrldata-api-urlstringNoCustom API URL (defaults to $https://www.blogextras.com)

Forms Widget

Quick Start

Add custom forms to your website and collect submissions with the forms widget.

Add the Widget

<!-- Add to your <head> -->
<link rel="stylesheet" href="https://www.blogextras.com/forms.css" />
<script is:inline async defer src="https://www.blogextras.com/forms.js"></script>

<!-- Add where you want the form to appear -->
<div id="blogextras-form-{form-id}" 
     data-form-id="your-form-id"
     data-api-url="https://www.blogextras.com">
</div>

Configuration Options

OptionData AttributeTypeRequiredDescription
formIddata-form-idstringYesYour form's unique identifier from the dashboard
apiUrldata-api-urlstringNoCustom API URL (defaults to $https://www.blogextras.com)

Security

  • All user inputs are HTML-escaped to prevent XSS attacks
  • API requests include CORS protection
  • No external dependencies or third-party code
  • Comments require approval before being displayed
  • Form submissions are validated server-side
  • Rate limiting is applied to prevent abuse
Logged out successfully
Reply posted successfully
Comment approved successfully