Send RCS Message
The RCS message embed enables customers to preview and send RCS messages directly from your website. Perfect for sending demos.
Step 1: Backend
Create an endpoint that requests a signed token from Pinnacle. Configure the display message and send permissions.
server.ts
package.json
.env.example
1 import 'dotenv/config'; 2 import express from 'express'; 3 4 const app = express(); 5 app.use(express.json()); 6 7 app.get('/api/get-send-rcs-message-token', async (req, res) => { 8 const response = await fetch('https://api.pinnacle.sh/embed/get-token', { 9 method: 'POST', 10 headers: { 11 'Content-Type': 'application/json', 12 'pinnacle-api-key': process.env.PINNACLE_API_KEY! 13 }, 14 body: JSON.stringify({ 15 // required 16 agentId: process.env.AGENT_ID!, 17 scopes: ['MESSAGES.SEND'], 18 configuredMessage: { 19 // required 20 agentName: "Your Brand", 21 agentIconUrl: "https://example.com/icon.png", 22 title: "Message Title", 23 subtitle: "Message Subtitle", 24 basicText: "Your message content", 25 consentText: "Message and data rates may apply.", 26 termsUrl: "https://example.com/terms", 27 privacyUrl: "https://example.com/privacy", 28 29 // optional 30 imageUrl: "https://example.com/image.jpg", 31 videoUrl: "https://example.com/video.mp4", 32 pdfUrl: "https://example.com/document.pdf", 33 pdfSize: 10, 34 quickReplies: [ 35 { type: 'trigger', title: 'Shop Now', payload: 'shop_action' }, 36 { type: 'openUrl', title: 'Learn More', payload: 'https://example.com' }, 37 { type: 'call', title: 'Call Support', payload: '+14155551234' }, 38 { 39 type: 'sendLocation', 40 title: 'Get Directions', 41 latLong: { lat: 37.7749, lng: -122.4194 }, 42 name: 'Store Location' 43 }, 44 { type: 'requestUserLocation', title: 'Find Nearby' }, 45 { 46 type: 'scheduleEvent', 47 title: 'Add to Calendar', 48 eventStartTime: '2025-02-21T10:00:00Z', 49 eventEndTime: '2025-02-21T11:00:00Z', 50 eventTitle: 'Product Demo', 51 } 52 ] 53 } 54 }) 55 }); 56 57 const { signedToken } = await response.json(); 58 res.json({ signedToken }); 59 }); 60 61 app.listen(8080, () => { 62 console.log('Server running at http://localhost:8080'); 63 });
Schema
| Field | Type | Required | Description |
|---|---|---|---|
agentId | string | Yes | Your RCS agent ID |
configuredMessage | object | Yes | Message content and layout configuration |
scopes | string[] | Yes | Permissions granted to the token |
configuredMessage
scopes
| Field | Type | Required | Description |
|---|---|---|---|
agentName | string | Yes | Display name for your RCS agent |
agentIconUrl | string | Yes | URL to your agent’s icon image |
title | string | Yes | Card title for rich messages |
subtitle | string | Yes | Supporting text under the title |
basicText | string | Yes | Plain text content for simple messages |
consentText | string | Yes | Legal consent disclosure text |
termsUrl | string | Yes | Link to your terms of service |
privacyUrl | string | Yes | Link to your privacy policy |
imageUrl | string | No | Image URL for rich media messages |
videoUrl | string | No | Video URL for rich media messages |
pdfUrl | string | No | PDF URL for rich media messages |
pdfSize | number | No | PDF file size in KB |
quickReplies | RichButton[] | No | Array of RichButton objects (max 10) |
Maximum 10 quick replies per message. See the RCS API reference for all available quick reply types.
Step 2: Frontend
Add the iframe to your page. Subscribe to the message event to listen for RCS_WIDGET_READY, then send INIT_SEND_DEMO with your signed token to initialize the embed.
1 <!-- Other page content --> 2 3 <iframe 4 id="send_rcs" 5 src="https://embed.pinnacle.sh/embed/v2/send-rcs-message" 6 style="width: 100vw; height: 100vh; border: none;"> 7 </iframe> 8 9 <!-- Other page content --> 10 11 <script> 12 const iframe = document.getElementById('send_rcs'); 13 14 window.addEventListener('message', async (event) => { 15 if (event.origin !== 'https://embed.pinnacle.sh') return; 16 17 if (event.data.type === 'RCS_WIDGET_READY') { 18 // Fetch token from your backend 19 const res = await fetch('/api/get-send-rcs-message-token'); 20 const { signedToken } = await res.json(); 21 22 // Initialize the widget 23 iframe.contentWindow.postMessage({ 24 type: 'INIT_SEND_DEMO', // required 25 signedToken: signedToken, // required 26 primaryColor: '#16a34a' 27 }, 'https://embed.pinnacle.sh'); 28 } 29 }); 30 </script> 31 32 <!-- Other page content -->
Events
| Field | Type | Description |
|---|---|---|
INIT_SEND_DEMO | postMessage | Send signed token and configuration to initialize the widget |
RCS_WIDGET_READY | event | Iframe has loaded and is ready to receive configuration |
INIT_SEND_DEMO
RCS_WIDGET_READY
| Field | Type | Required | Description |
|---|---|---|---|
type | "INIT_SEND_DEMO" | Yes | Message type identifier |
signedToken | string | Yes | JWT token from your backend |
primaryColor | string | No | Primary color for the widget (defaults to #16a34a) |
Complete Integration
index.html
server.ts
package.json
.env.example
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>RCS Message Demo</title> 7 </head> 8 <body> 9 <iframe 10 id="send_rcs" 11 src="https://embed.pinnacle.sh/embed/v2/send-rcs-message" 12 style="width: 100vw; height: 100vh; border: none;"> 13 </iframe> 14 15 <script> 16 const iframe = document.getElementById('send_rcs'); 17 18 window.addEventListener('message', async (event) => { 19 if (event.origin !== 'https://embed.pinnacle.sh') return; 20 21 if (event.data.type === 'RCS_WIDGET_READY') { 22 // Fetch token from your backend 23 const res = await fetch('/api/get-send-rcs-message-token'); 24 const { signedToken } = await res.json(); 25 26 // Initialize the widget 27 iframe.contentWindow.postMessage({ 28 type: 'INIT_SEND_DEMO', // required 29 signedToken: signedToken, // required 30 primaryColor: '#16a34a' 31 }, 'https://embed.pinnacle.sh'); 32 } 33 }); 34 </script> 35 </body> 36 </html>

