🔥 Svelte Guide

How to Add an AI Chatbot to Svelte

Svelte compiles your components into efficient vanilla JS. Adding a Tuqlas chatbot is equally lean — just use the svelte:head special element in your root layout.

01

Create a chatbot on Tuqlas

Sign up at tuqlas.com, create a chatbot, and copy your embed key.

02

Add the script via svelte:head

In your root layout (+layout.svelte for SvelteKit), use the svelte:head tag to inject the Tuqlas embed script.

03

Deploy

The chatbot appears on every page. Works with SvelteKit, standalone Svelte, and Svelte 5.

src/routes/+layout.svelte
<svelte:head>
  <script
    src="https://tuqlas.com/chatbot.js"
    data-key="tq_live_xxxxxxxxxxxx"
    defer
  ></script>
</svelte:head>

<slot />
💡 Tip

The svelte:head approach ensures the script is added to the document head, which is the cleanest way to load third-party scripts in Svelte.

Ready to add a chatbot to Svelte?

Create your chatbot and get your embed key in under a minute.

Get Started →View All Frameworks