Svelte
Setup Ticketping chat widget in Svelte / Sveltekit projects
Quick Start
The easiest way to use the Ticketping Chat Widget in Svelte:
npm install @ticketping/chat-widget
<script>
import TicketpingChat from '@ticketping/chat-widget/svelte';
import('@ticketping/chat-widget/style')
</script>
<TicketpingChat
appId="your-app-id"
teamSlug="your-team-slug"
teamLogoIcon="cdn-link-to-your-logo-square"
/>
If you're on Svelte 4, import from @ticketping/chat-widget/svelte4
With Custom Theme
<script>
import TicketpingChatWidget from '@ticketping/chat-widget/svelte'
import('@ticketping/chat-widget/style')
export let appId = 'your-app-id'
export let teamSlug = 'your-team-slug'
export let teamLogoIcon = 'cdn-link-to-your-logo-square'
const myTheme = {
primaryColor: '#007BFF', // accent color
primaryHover: '#0056b3', // slightly darker accent color
textPrimary: '#111827', // gray.900 (main text)
textSecondary: '#374151', // gray.700 (secondary text)
textMuted: '#6b7280', // gray.500 (muted text)
background: '#ffffff', // white
backgroundSecondary: '#f3f4f6', // gray.100
backgroundTertiary: '#e5e7eb', // gray.200
}
</script>
<TicketpingChatWidget
{appId}
{teamSlug}
{teamLogoIcon}
{theme}
/>
Want the chat widget to recognize your users? Check out our authentication guide.