Integrate via Script

Install the SnippetAI web component via a script tag. This is useful for doc providers that don’t allow you to add your own script tags but do allow custom JS.

If you are in a react environment or can add a custom script tag, take a look at Integrate via React or Integrate via Web Component are preferred.

Required Steps

Add the two components to your documentation site;

A button with an HTML ID that you want to trigger the component
The script tag to mount the web component

Below is an example minimal HTML installation.

<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

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