Sendable Docs
QuickstartNodejs

SvelteKit Integration

Build a full-stack SvelteKit app with Sendable WhatsApp API.

Project Setup

npm create svelte@latest my-sendable-app
cd my-sendable-app
npm install

Environment Setup

Create .env:

SENDABLE_API_KEY=your_api_key_here

API Route

Create src/routes/api/send-message/+server.ts:

import type { RequestHandler } from './$types'
import { SENDABLE_API_KEY } from '$env/static/private'

export const POST: RequestHandler = async ({ request }) => {
  const { to, text } = await request.json()

  const response = await fetch('https://api.sendable.dev/messages/send', {
    method: 'POST',
    headers: {
      'x-api-key': SENDABLE_API_KEY,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ to, text }),
  })

  return new Response(JSON.stringify(await response.json()), {
    status: response.status,
  })
}

Component

Create src/lib/components/MessageForm.svelte:

<script lang="ts">
  let to = ''
  let text = ''
  let status = ''

  async function sendMessage() {
    const res = await fetch('/api/send-message', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ to, text }),
    })
    status = res.ok ? 'Sent!' : 'Failed'
  }
</script>

<form on:submit|preventDefault={sendMessage}>
  <input bind:value={to} placeholder="Phone" />
  <textarea bind:value={text} placeholder="Message" />
  <button type="submit">Send</button>
  <p>{status}</p>
</form>

See full example on GitHub.

On this page