Tluma Widget API

https://tluma.ai/widget-api
Admin
Tluma Widget API provides an embeddable Ask AI chat widget for websites that connects to GitHub...
Tokens:2,468
Snippets:9
Trust Score:2.3
Update:7 months ago
Show doc for...
Tokens:
Raw
### Minimal Widget Setup

Source: https://tluma.ai/widget-api

A basic implementation requiring only the mandatory 'source' parameter to connect the widget to a project repository.

```html
<script>
  window.tlumaConfig = {
    source: "owner/repo"
  };
</script>
<script src="https://127.0.0.1:3000/widget.js" async></script>
```

--------------------------------

### Configure and Initialize Tluma Widget

Source: https://tluma.ai/widget-api

The standard method for installing the Tluma widget involves defining a global 'tlumaConfig' object before loading the widget script. This configuration controls the source project, visual styling, and behavioral settings.

```html
<script>
  window.tlumaConfig = {
    source: "owner/repo",
    theme: "auto",
    brandColor: "blue",
    button: "bottom-right",
    edgePadding: "1rem",
    autoOpen: false
  };
</script>
<script src="https://127.0.0.1:3000/widget.js" async></script>
```

--------------------------------

### Configure Prefill Starter Prompt (HTML)

Source: https://tluma.ai/widget-api

This snippet demonstrates how to prefill the starter prompt in the Tluma AI widget without sending it immediately. It requires defining `window.tlumaConfig` with the `source` and `prefillStarterPrompt` properties before loading the widget script.

```html
<script>
  window.tlumaConfig = {
    source: "owner/repo",
    prefillStarterPrompt: "How do I configure the GitHub auth flow?"
  };
</script>
<script src="https://127.0.0.1:3000/widget.js" async></script>
```

--------------------------------

### Configure Auto-Send Starter Prompt (HTML)

Source: https://tluma.ai/widget-api

This snippet shows how to configure the Tluma AI widget to automatically send a starter prompt on the first fresh page load. It involves setting `window.tlumaConfig` with `source` and `autoSendStarterPrompt` before the widget script is loaded.

```html
<script>
  window.tlumaConfig = {
    source: "owner/repo",
    autoSendStarterPrompt: "Give me the quickest local development setup"
  };
</script>
<script src="https://127.0.0.1:3000/widget.js" async></script>
```

--------------------------------

### Customized Theme and Brand Styling

Source: https://tluma.ai/widget-api

Demonstrates how to override default visual settings by specifying a light theme, a custom brand color, and specific launcher positioning.

```html
<script>
  window.tlumaConfig = {
    source: "owner/repo",
    theme: "light",
    brandColor: "green",
    button: "bottom-left",
    edgePadding: "24px"
  };
</script>
<script src="https://127.0.0.1:3000/widget.js" async></script>
```

--------------------------------

### Control Tluma AI Widget with JavaScript API

Source: https://tluma.ai/widget-api

This JavaScript code demonstrates various methods available through the `window.TlumaAskAi` object to control the Tluma AI widget after it has loaded. These methods allow programmatic interaction such as opening, closing, toggling, prefilling prompts, sending prompts, and destroying the widget instance.

```javascript
window.TlumaAskAi.open();
window.TlumaAskAi.close();
window.TlumaAskAi.toggle();
window.TlumaAskAi.prefillPrompt("How do I configure SSO?");
window.TlumaAskAi.sendPrompt("Show me the fastest production deploy path");
window.TlumaAskAi.destroy();
```

--------------------------------

### Hidden Launcher Configuration

Source: https://tluma.ai/widget-api

Sets the button to 'hidden' to prevent the default launcher from appearing, useful when the widget should only be triggered programmatically.

```html
<script>
  window.tlumaConfig = {
    source: "owner/repo",
    button: "hidden",
    autoOpen: false
  };
</script>
<script src="https://127.0.0.1:3000/widget.js" async></script>
```

--------------------------------

### Mount Widget Inline in Container

Source: https://tluma.ai/widget-api

Mounts the widget into a specific DOM element by providing a 'containerId', causing it to behave as inline content rather than a floating widget.

```html
<div id="ask-ai-demo"></div>

<script>
  window.tlumaConfig = {
    source: "owner/repo",
    containerId: "ask-ai-demo",
    button: "hidden",
    autoOpen: true
  };
</script>
<script src="https://127.0.0.1:3000/widget.js" async></script>
```

--------------------------------

### Disable Background Preload

Source: https://tluma.ai/widget-api

Disables the automatic background iframe warming process by setting 'preloadAfterMs' to false.

```html
<script>
  window.tlumaConfig = {
    source: "owner/repo",
    preloadAfterMs: false
  };
</script>
<script src="https://127.0.0.1:3000/widget.js" async></script>
```
Tokens:
Raw