# Simple HTML/JS integration
### Simple HTML/JavaScript Integration
Follow these steps to integrate the Staysignal widget into your website:
#### 1. Include the Script
Add the Staysignal script to your website, replacing `YOUR_SITE_ID_HERE` with your actual Site ID:
```html
```
**Activate your 14-day free trial to get Site ID**
Please [activate your subscription](https://app.staysignal.com/dashboard/settings/subscription) to get your unique Site ID and fully integrate the widget. This code example uses a placeholder.
#### 2. Initialize the Widget
Initialize the widget with callback handlers. The Site ID is automatically included from the script URL.
```javascript
```
#### 3. Add Cancel Buttons
You have two options to add cancel buttons to your site, and you can also opt out of automatic cancellation if you have a custom process:
**Opt-Out of Automatic Cancellation**
**To prevent Staysignal from cancelling the subscription automatically**, use either of these methods:
* **Config option:** Pass `cancelOptOut: true` to the widget init config.
* **Button attribute:** Add `data-ss-cancel-optout="true"` to your cancel button.
**Precedence:** If either method is set, cancellation is skipped and a message is logged to the console.
**Option 1: Class-based Approach (Recommended)**
Add the `staysignal-cancel` class and `data-subscription_id` attribute to any button. To opt out, add `data-ss-cancel-optout="true"`:
```html
```
[Need help finding the subscription ID?](https://app.gitbook.com/o/L1J4IXndMOL7SI7HjRkS/s/vYa98TfDh2GiMvr5EyYo/~/changes/10/basics/integrations/finding-stripe-subscription-ids)
**Option 2: JavaScript Approach**
Manually trigger the widget using JavaScript. To opt out globally, pass `cancelOptOut: true` to the config:
```javascript
```
#### Complete Example
```html
StaySignal Integration Example
{/* Example Button: */}
```
### Testing
To test your integration:
1. Ensure the widget script loads successfully
2. Check browser console for any errors
3. Test both class-based and JavaScript-based cancel buttons
4. Verify the `onComplete` callback is triggered
5. Test error scenarios by providing invalid subscription IDs
### Need Help?
If you encounter any issues with the integration, please contact our support team.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://staysignal.gitbook.io/staysignal-docs/integration-guides/simple-html-js-integration.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.