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

# Vanilla JS Setup

> Using the Widget as a CDN installation

You can install the hotglue widget via the following CDN distribution:

```html theme={null}
<script src="https://hotglue.xyz/widgetv3.js"></script>
```

Next, you can initialize the widget using your hotglue [environment ID](/api-reference/overview#environment-id) and [public API key](/api-reference/overview#api-key):

```html theme={null}
<title>Hotglue Widget</title>
<!-- CSS is now bundled within the JavaScript file -->
<script src="https://hotglue.xyz/widgetv3.js"></script>
<script>
    // Manual approach
    const hotglue = new Hotglue({
    tenantId: '<OPTIONAL TENANT ID FOR PREFETCHING>',
    environmentId: '<ENV ID>',
    apiKey: '<PUBLIC API KEY>'
    });
</script>
```

For custom validation before credentials are submitted in React, call the `setCredentialsValidator` handler returned by `useHotglue`. See the full [setCredentialsValidator](/widget-v3/reference/setCredentialsValidator) reference.

Finally, you can open the widget `hotglue.openWidget()`

```html theme={null}

<!DOCTYPE html>
<html>
<head>
    <title>Hotglue Widget</title>
    <script src="https://hotglue.xyz/widgetv3.js"></script>
    <script>
      // Manual approach
        const hotglue = new Hotglue({
            tenantId: 'tenant-123',
            environmentId: '<ENV ID>',
            apiKey: '<PUBLIC API KEY>'
        });

      // Control widget
      function openWidget() {
        hotglue.openWidget();
      }
    </script>

</head>
<body>
    <button onclick="openWidget()">Open Widget</button>
</body>
</html>
```
