Skip to Content
DocumentationSDK Documentation

Integrate via Script

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 or 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.

<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
Your public API key for authentication
Default
—
Required
Yes
Description
Programming language for code generation (
,
,
,
,
,
)
Default
—
Required
No
Description
Custom ID attribute for a button element that will open SnippetAI when clicked
Default
—
Required
No
Description
Keyboard shortcut to open the Command Bar
Default
(cmd+k / ctrl+k)
Required
No
Description
Z-index of the command bar
Default
Required
No
Description
Searchable list of suggestions for the command bar
Default
Required
No

Last updated on