> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nocknock.cloud/llms.txt
> Use this file to discover all available pages before exploring further.

# Test Your NOCK Widget: Verify the Installation Works

> Verify your NOCK widget is installed correctly by checking the button appears, submitting a test ticket, and confirming it arrives in the Dashboard.

Once you've added the snippet to your site, spend two minutes running through this quick test to make sure everything is working end to end. You'll confirm the widget button is visible, submit a real piece of test feedback, and verify the ticket arrives in your NOCK Dashboard with all the automatic context attached.

## Step 1 — Check the widget button appears

<Steps>
  <Step title="Open your live site">
    Navigate to any page of your site where the snippet is installed. Use the same browser you use day-to-day (no special browser or incognito mode needed for this check).
  </Step>

  <Step title="Look for the NOCK feedback button">
    The NOCK widget button appears as a small floating button, typically in the bottom-right corner of the page. By default it shows a chat or feedback icon. If you see it, the script loaded successfully.

    <Tip>
      If you customised the button position or colour in **Settings → Widget**, look in the position you configured rather than the default corner.
    </Tip>
  </Step>
</Steps>

## Step 2 — Send a test ticket

<Steps>
  <Step title="Click the feedback button">
    Click the floating widget button. The feedback form opens as an overlay on your page.
  </Step>

  <Step title="Fill in the form">
    Choose a feedback type — **Bug**, **Feature**, or **General** — then type a short test message such as:

    > *"This is a test ticket from the NOCK setup guide."*

    You don't need to fill in every field. A type and a message are enough to send a valid submission.
  </Step>

  <Step title="Submit the feedback">
    Click **Send** (or the equivalent submit button in your widget theme). You should see a confirmation message inside the widget overlay telling you the feedback was received.
  </Step>
</Steps>

## Step 3 — Verify the ticket in the Dashboard

<Steps>
  <Step title="Open your project in the NOCK Dashboard">
    Go to [nocknock.cloud](https://nocknock.cloud), open your workspace, and select the project you installed the widget on.
  </Step>

  <Step title="Find the ticket in your inbox">
    Click **Inbox** or **Tickets** in the left sidebar. Your test submission should appear at the top of the list within a few seconds of submitting it.
  </Step>

  <Step title="Open the ticket and inspect the captured context">
    Click on the ticket to open it. NOCK automatically captures and attaches the following context alongside every submission:

    | Data                 | What you'll see                                                     |
    | -------------------- | ------------------------------------------------------------------- |
    | **Browser**          | Browser name and version (e.g. Chrome 124)                          |
    | **Operating system** | OS name and version (e.g. macOS 14.4)                               |
    | **Viewport**         | Screen dimensions of the submitter's device                         |
    | **Page URL**         | The exact URL where the widget was open when feedback was submitted |
    | **Screenshot**       | A screenshot of the page at the time of submission (if enabled)     |
    | **Console logs**     | Recent browser console output (if enabled)                          |

    If the ticket appears with all this context, your installation is complete and working correctly.
  </Step>
</Steps>

<Note>
  Screenshot capture and console log capture can be toggled on or off in **Settings → Widget**. If you don't see these fields on your test ticket, check that the features are enabled in your project settings.
</Note>

## The button isn't appearing

If you don't see the widget button after loading your site, work through this checklist:

* **Wrong placement** — The snippet might be inside a component that doesn't render on every page, or it was added to `<head>` instead of `<body>`. Confirm the script tag is inside `<body>`, before `</body>`, in a persistent layout.
* **Token mismatch or missing token** — Open your browser's developer console (F12) and check for errors mentioning `nock.js` or an invalid token. Compare the `data-token` value in your HTML against the token shown in **Settings → Widget**.
* **Script blocked by an ad blocker or CSP** — Some browser extensions or Content Security Policies block third-party scripts. Try in a clean browser profile without extensions, or review your CSP headers to ensure `nocknock.cloud` is allowed.
* **Caching** — If you're testing after a deployment, do a hard refresh (`Ctrl + Shift + R` / `Cmd + Shift + R`) or clear your browser cache to make sure you're seeing the latest version of your page.
* **Snippet on wrong environment** — If you installed the snippet in a staging environment but are testing in production (or vice versa), the button won't appear because the script simply isn't loaded on that page.

<Warning>
  Using the wrong project token won't prevent the button from appearing, but any tickets submitted will arrive in the wrong project's inbox. Always double-check the token matches the project you're monitoring.
</Warning>

## What's next?

Your widget is live and verified. Explore the configuration options to tailor the widget's appearance, behaviour, and data-capture features to your product.

<CardGroup cols={2}>
  <Card title="Configure the Widget" icon="sliders" href="/widget/configure-widget">
    Customise button position, colours, feedback types, and data capture settings.
  </Card>

  <Card title="Invite Your Team" icon="users" href="/dashboard/team-members">
    Bring your teammates into the workspace so they can triage and respond to feedback.
  </Card>
</CardGroup>