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 installEnvironment Setup
Create .env:
SENDABLE_API_KEY=your_api_key_hereAPI 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.