Inbound-first

<form id="text-us">
  <input type="text" name="name" placeholder="Your name" required />
  <button type="submit">Submit</button>
</form>

<script>
  function openText(event) {
    event.preventDefault();
    const name = event.target.name.value;
    const body = encodeURIComponent(`Hi, I'm ${name} and I'd like to chat!`);
    window.location.href = `sms:+15555550123?body=${body}`;
  }

  document.getElementById("text-us").addEventListener("submit", openText);
</script>

// Runs server-side (Express route, Next.js API route, etc.), keeping your API key off the client.
import { Contiguity } from "contiguity";

// Reads CONTIGUITY_API_KEY from env; see the SDK overview for other init options.
const contiguity = new Contiguity();

export async function getImessageNumber(req, res) {
  const { numbers } = await contiguity.lease.leased({
    filter: { status: "active", capabilities: ["imessage"] },
  });

  if (numbers.length === 0) {
    return res.status(404).json({ error: "No iMessage-capable numbers available" });
  }

  // Spread load across lines instead of hammering one number.
  const chosen = numbers[Math.floor(Math.random() * numbers.length)];
  res.json({ number: chosen.number.e164 });
}

import { useState } from "react";

function TextUsButton() {
  const [loading, setLoading] = useState(false);

  async function getNumber() {
    const res = await fetch("/api/imessage-number");
    const data = await res.json();
    return data.number;
  }

  async function openImessage() {
    setLoading(true);
    const number = await getNumber();
    setLoading(false);

    if (!number) return;

    const body = encodeURIComponent("Hi! I'd like to chat.");
    window.location.href = `sms:${number}?body=${body}`;
  }

  return (
    <button onClick={openImessage} disabled={loading}>
      {loading ? "Connecting…" : "Text us"}
    </button>
  );
}

export default TextUsButton;