# Integrate via Script
Source: https://speakeasy.com/docs/sdks/sdk-docs/snippet-ai/integrate-via-script

import { Table } from "@/mdx/components";



Install the SnippetAI web component via a script tag.
This is useful for doc providers that don't allow adding custom script tags but do allow custom JS.

For React environments or when custom script tags are available, refer to
[Integrate via React](/docs/sdk-docs/snippet-ai/integrate-via-react) or [Integrate via Web Component](/docs/sdk-docs/snippet-ai/integrate-via-web-component) which are preferred.

## Required Steps
Add the two components to your documentation site;
1. A button with an HTML ID that you want to trigger the component
2. The script tag to mount the web component

Below is an example minimal HTML installation.

```html
<script>
  const script = document.createElement('script')
  script.type = 'module'
  script.src = 'https://snippet-ai.speakeasy-cloud.com/assets/index.es.js'
  document.head.appendChild(script)

  script.addEventListener('load', async () => {
    const snippetAI = document.createElement('snippet-ai')

    // Replace values here with your own
    // ---------------------------------

    snippetAI.setAttribute('publishingToken', '<your token>')
    snippetAI.setAttribute('suggestions', JSON.stringify([
      '<suggestion 1>'
    ]))
    snippetAI.setAttribute('triggerelementid', 'your-element-ID')

    // ---------------------------------
    document.body.appendChild(snippetAI)
  })
</script>

<button id="your-element-ID">
  My trigger
</button>
```

In the above script you can configure your component by adjusting the following HTML attributes

<Table
  data={[
    { attribute: "`publishingtoken`", description: "Your public API key for authentication", required: "Yes", default: "—" },
    { attribute: "`codelang`", description: "Programming language for code generation (`typescript`, `python`, `go`, `java`, `csharp`, `php`)", required: "No", default: "—" },
    { attribute: "`triggerelementid`", description: "Custom ID attribute for a button element that will open SnippetAI when clicked", required: "No", default: "—" },
    { attribute: "`toggleshortcut`", description: "Keyboard shortcut to open the Command Bar", required: "No", default: "`\"$mod+k\"` (cmd+k / ctrl+k)" },
    { attribute: "`zindex`", description: "Z-index of the command bar", required: "No", default: "`\"1000\"`" },
    { attribute: "`suggestions`", description: "Searchable list of suggestions for the command bar", required: "No", default: "`\"[]\"`" }
  ]}
  columns={[
    { key: "attribute", header: "Attribute" },
    { key: "description", header: "Description" },
    { key: "required", header: "Required" },
    { key: "default", header: "Default" }
  ]}
/>