feat(websms): add API integration documentation with code examples
Shows endpoint, auth, request/response formats and code tabs for cURL, JavaScript, PHP and Python. API Key is auto-injected from the page state so examples are ready to copy-paste. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
66088ce691
commit
f56d6891aa
@@ -111,6 +111,144 @@
|
||||
<p x-show="copied" x-text="copied" class="text-green-600 text-xs mt-3"></p>
|
||||
</div>
|
||||
|
||||
<!-- Documentación de integración -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6" x-data="{ tab: 'curl' }">
|
||||
<div class="flex items-center justify-between mb-5">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-slate-800">Documentación de integración</h2>
|
||||
<p class="text-sm text-slate-500 mt-0.5">Cómo enviar SMS desde tu propio sistema</p>
|
||||
</div>
|
||||
<span class="text-xs px-2 py-1 bg-green-100 text-green-700 rounded-full font-bold">REST API</span>
|
||||
</div>
|
||||
|
||||
<!-- Endpoint -->
|
||||
<div class="mb-5">
|
||||
<p class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Endpoint</p>
|
||||
<div class="flex items-center gap-2 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2">
|
||||
<span class="text-xs font-bold bg-blue-600 text-white px-2 py-0.5 rounded font-mono">POST</span>
|
||||
<code class="text-sm font-mono text-slate-700 flex-1">https://admin.u-site.app/api/sms/send</code>
|
||||
<button type="button" @click="copy('https://admin.u-site.app/api/sms/send')" class="btn-icon text-slate-400 hover:text-slate-600" title="Copiar">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Auth -->
|
||||
<div class="mb-5">
|
||||
<p class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Autenticación</p>
|
||||
<div class="bg-amber-50 border border-amber-200 rounded-lg p-3 text-sm text-amber-800">
|
||||
Incluye tu API Key en el header <code class="bg-amber-100 px-1 rounded font-mono text-xs">Authorization: Bearer {API_KEY}</code>.<br>
|
||||
Encuentra tu API Key en la sección <strong>API Key (envío externo)</strong> de esta página.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Request/Response -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
|
||||
<div>
|
||||
<p class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Body (JSON)</p>
|
||||
<div class="bg-slate-900 rounded-lg p-4">
|
||||
<pre class="text-green-400 text-xs font-mono leading-relaxed">{
|
||||
"numero": "573001234567",
|
||||
"mensaje": "Hola, este es tu código: 9821"
|
||||
}</pre>
|
||||
</div>
|
||||
<div class="mt-2 space-y-1">
|
||||
<div class="flex gap-2 text-xs"><code class="text-blue-600 font-mono font-bold w-16">numero</code><span class="text-slate-500">Teléfono en formato internacional sin <code class="bg-slate-100 px-1 rounded">+</code> (ej: <code class="bg-slate-100 px-1 rounded">573001234567</code>)</span></div>
|
||||
<div class="flex gap-2 text-xs"><code class="text-blue-600 font-mono font-bold w-16">mensaje</code><span class="text-slate-500">Texto del SMS. Máx 160 caracteres para un crédito.</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Respuestas</p>
|
||||
<div class="space-y-2">
|
||||
<div>
|
||||
<span class="text-xs font-bold text-green-700">200 — Enviado</span>
|
||||
<div class="bg-slate-900 rounded-lg p-3 mt-1">
|
||||
<pre class="text-green-400 text-xs font-mono">{ "ok": true, "id": "6a3d4f155..." }</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-xs font-bold text-red-600">401 — No autenticado</span>
|
||||
<div class="bg-slate-900 rounded-lg p-3 mt-1">
|
||||
<pre class="text-red-400 text-xs font-mono">{ "error": "token requerido" }</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-xs font-bold text-red-600">400 — Datos inválidos</span>
|
||||
<div class="bg-slate-900 rounded-lg p-3 mt-1">
|
||||
<pre class="text-red-400 text-xs font-mono">{ "error": "numero y mensaje son requeridos" }</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-xs font-bold text-red-600">500 — Error LabsMobile</span>
|
||||
<div class="bg-slate-900 rounded-lg p-3 mt-1">
|
||||
<pre class="text-red-400 text-xs font-mono">{ "error": "descripción del error" }</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code examples -->
|
||||
<div>
|
||||
<p class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Ejemplos de código</p>
|
||||
<!-- Tabs -->
|
||||
<div class="flex gap-1 mb-3 border-b border-slate-200">
|
||||
<template x-for="t in [{id:'curl',label:'cURL'},{id:'js',label:'JavaScript'},{id:'php',label:'PHP'},{id:'python',label:'Python'}]" :key="t.id">
|
||||
<button type="button" @click="tab=t.id"
|
||||
:class="tab===t.id ? 'border-b-2 border-green-600 text-green-700 font-bold' : 'text-slate-500 hover:text-slate-700'"
|
||||
class="px-3 py-1.5 text-xs transition-colors -mb-px"
|
||||
x-text="t.label"></button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- cURL -->
|
||||
<div x-show="tab==='curl'" class="relative group">
|
||||
<div class="bg-slate-900 rounded-lg p-4">
|
||||
<pre class="text-green-400 text-xs font-mono leading-relaxed whitespace-pre-wrap" x-text="`curl -X POST https://admin.u-site.app/api/sms/send \\\n -H 'Authorization: Bearer ${secretKey || '{API_KEY}'}' \\\n -H 'Content-Type: application/json' \\\n -d '{\n \"numero\": \"573001234567\",\n \"mensaje\": \"Hola, este es tu código: 9821\"\n }'`"></pre>
|
||||
</div>
|
||||
<button type="button" @click="copy(`curl -X POST https://admin.u-site.app/api/sms/send -H 'Authorization: Bearer ${secretKey}' -H 'Content-Type: application/json' -d '{\"numero\":\"573001234567\",\"mensaje\":\"Hola\"}'`)"
|
||||
class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-slate-700 hover:bg-slate-600 text-slate-300 rounded px-2 py-1 text-xs">
|
||||
Copiar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<div x-show="tab==='js'" class="relative group">
|
||||
<div class="bg-slate-900 rounded-lg p-4">
|
||||
<pre class="text-green-400 text-xs font-mono leading-relaxed whitespace-pre-wrap" x-text="`const response = await fetch('https://admin.u-site.app/api/sms/send', {\n method: 'POST',\n headers: {\n 'Authorization': 'Bearer ${secretKey || '{API_KEY}'}',\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n numero: '573001234567',\n mensaje: 'Hola, este es tu código: 9821',\n }),\n});\n\nconst data = await response.json();\nconsole.log(data); // { ok: true, id: '6a3d...' }`"></pre>
|
||||
</div>
|
||||
<button type="button" @click="copy(`fetch('https://admin.u-site.app/api/sms/send',{method:'POST',headers:{'Authorization':'Bearer ${secretKey}','Content-Type':'application/json'},body:JSON.stringify({numero:'573001234567',mensaje:'Hola'})})`)"
|
||||
class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-slate-700 hover:bg-slate-600 text-slate-300 rounded px-2 py-1 text-xs">
|
||||
Copiar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- PHP -->
|
||||
<div x-show="tab==='php'" class="relative group">
|
||||
<div class="bg-slate-900 rounded-lg p-4">
|
||||
<pre class="text-green-400 text-xs font-mono leading-relaxed whitespace-pre-wrap" x-text="`<?php\n$ch = curl_init('https://admin.u-site.app/api/sms/send');\ncurl_setopt_array($ch, [\n CURLOPT_RETURNTRANSFER => true,\n CURLOPT_POST => true,\n CURLOPT_HTTPHEADER => [\n 'Authorization: Bearer ${secretKey || '{API_KEY}'}',\n 'Content-Type: application/json',\n ],\n CURLOPT_POSTFIELDS => json_encode([\n 'numero' => '573001234567',\n 'mensaje' => 'Hola, este es tu código: 9821',\n ]),\n]);\n$response = json_decode(curl_exec($ch), true);\ncurl_close($ch);\n// $response['ok'] === true`"></pre>
|
||||
</div>
|
||||
<button type="button" @click="copy(`<?php $ch=curl_init('https://admin.u-site.app/api/sms/send');curl_setopt_array($ch,[CURLOPT_RETURNTRANSFER=>true,CURLOPT_POST=>true,CURLOPT_HTTPHEADER=>['Authorization: Bearer ${secretKey}','Content-Type: application/json'],CURLOPT_POSTFIELDS=>json_encode(['numero'=>'573001234567','mensaje'=>'Hola'])]);echo curl_exec($ch);`)"
|
||||
class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-slate-700 hover:bg-slate-600 text-slate-300 rounded px-2 py-1 text-xs">
|
||||
Copiar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Python -->
|
||||
<div x-show="tab==='python'" class="relative group">
|
||||
<div class="bg-slate-900 rounded-lg p-4">
|
||||
<pre class="text-green-400 text-xs font-mono leading-relaxed whitespace-pre-wrap" x-text="`import requests\n\nresponse = requests.post(\n 'https://admin.u-site.app/api/sms/send',\n headers={\n 'Authorization': 'Bearer ${secretKey || '{API_KEY}'}',\n 'Content-Type': 'application/json',\n },\n json={\n 'numero': '573001234567',\n 'mensaje': 'Hola, este es tu código: 9821',\n },\n)\n\ndata = response.json()\nprint(data) # {'ok': True, 'id': '6a3d...'}`"></pre>
|
||||
</div>
|
||||
<button type="button" @click="copy(`import requests\nresponse=requests.post('https://admin.u-site.app/api/sms/send',headers={'Authorization':'Bearer ${secretKey}','Content-Type':'application/json'},json={'numero':'573001234567','mensaje':'Hola'})\nprint(response.json())`)"
|
||||
class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-slate-700 hover:bg-slate-600 text-slate-300 rounded px-2 py-1 text-xs">
|
||||
Copiar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p x-show="copied" x-text="copied" class="text-green-600 text-xs mt-3"></p>
|
||||
</div>
|
||||
|
||||
<!-- Logs -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
|
||||
<h2 class="text-lg font-bold text-slate-800 mb-4">Últimos envíos</h2>
|
||||
|
||||
Reference in New Issue
Block a user