How to Integrate Lovable with Webex by Cisco

Navigate to developer.webex.com and sign in with your Webex account (create a free account if needed). Click on your profile icon in the top right and select 'My Webex Apps', then click 'Create a New App'. Choose 'Create a Bot' from the app type options. Fill in the bot details: display name (how the bot appears in Webex Spaces), bot username (unique identifier ending in @webex.bot), icon (upload an image or select a default), and description. Click 'Add Bot'. On the next screen, Webex displays your Bot's Access Token — this is a permanent token that does not expire. Copy it immediately and store it securely — if you navigate away, you cannot retrieve the full token again (you must regenerate it). Also note your Bot's full email address (botname@webex.bot) — you will use this to invite the bot to Webex Spaces. To find the Space ID of an existing room, use the Webex API: GET https://webexapis.com/v1/rooms with your personal access token (available at developer.webex.com/docs/api/v1/rooms/list-rooms) to list rooms and find the ID of the space you want to post to.

In your Lovable editor, open the Cloud tab by clicking the '+' panel icon at the top right, then select Cloud. Scroll to the Secrets section and add two secrets. Name the first secret WEBEX_BOT_TOKEN and paste the Bot Access Token from developer.webex.com. Name the second secret WEBEX_ROOM_ID and paste the Space/Room ID where your bot will send messages (the Bot must be a member of this space — invite it by mentioning botname@webex.bot in the Webex app first). The Bot token is long — it is a JWT-like string several hundred characters long. Make sure you copy the entire token without truncation. If you paste only part of the token, the API will return 401 Unauthorized with a confusing error. Lovable's Secrets panel stores values of any length, so this is safe. Lovable blocks approximately 1,200 hardcoded API keys per day — the Secrets panel is the only secure way to store the Bot token.

The Webex messaging Edge Function sends messages to a Space using the Messages API at https://webexapis.com/v1/messages. A basic text message requires just roomId and text. For rich messages, you can include markdown or an attachments array containing an adaptive card. Adaptive cards in Webex use the AdaptiveCard schema (adaptivecards.io) and are specified as a JSON object in the attachment content. Webex renders these cards directly in the Space with buttons, data tables, and interactive elements. The contentType for Webex adaptive cards is 'application/vnd.microsoft.card.adaptive'. The Meetings API endpoint for creating a meeting is POST https://webexapis.com/v1/meetings with title, start, end, and timezone fields. Unlike the messaging Bot approach, meeting creation via the Bot token creates meetings associated with the bot's account — if you need meetings associated with a specific user's account, you need the OAuth2 authorization code flow. For most notification and scheduling use cases, bot-owned meetings work well because the join link is valid for all participants.

1// supabase/functions/webex-message/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9serve(async (req) => {
10  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
11
12  try {
13    const token = Deno.env.get('WEBEX_BOT_TOKEN')!;
14    const roomId = Deno.env.get('WEBEX_ROOM_ID')!;
15    const { text, markdown, cardTitle, cardBody } = await req.json();
16
17    let messageBody: Record<string, unknown> = { roomId };
18
19    if (cardTitle) {
20      messageBody = {
21        roomId,
22        text: cardTitle, // fallback text for older clients
23        attachments: [
24          {
25            contentType: 'application/vnd.microsoft.card.adaptive',
26            content: {
27              type: 'AdaptiveCard',
28              version: '1.3',
29              body: [
30                {
31                  type: 'TextBlock',
32                  text: cardTitle,
33                  weight: 'Bolder',
34                  size: 'Medium',
35                },
36                {
37                  type: 'TextBlock',
38                  text: cardBody,
39                  wrap: true,
40                },
41              ],
42            },
43          },
44        ],
45      };
46    } else if (markdown) {
47      messageBody.markdown = markdown;
48    } else {
49      messageBody.text = text;
50    }
51
52    const res = await fetch('https://webexapis.com/v1/messages', {
53      method: 'POST',
54      headers: {
55        'Authorization': `Bearer ${token}`,
56        'Content-Type': 'application/json',
57      },
58      body: JSON.stringify(messageBody),
59    });
60
61    const data = await res.json();
62    if (!res.ok) throw new Error(`Webex API error: ${JSON.stringify(data)}`);
63
64    return new Response(
65      JSON.stringify({ messageId: data.id, created: data.created }),
66      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
67    );
68  } catch (error) {
69    return new Response(
70      JSON.stringify({ error: error.message }),
71      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
72    );
73  }
74});

To receive messages from Webex users (for a bot command pattern), register a webhook in Webex that sends POST requests to your Edge Function. Create a second Edge Function called webex-webhook to receive these events. Register the webhook via the Webex API: POST to https://webexapis.com/v1/webhooks with name, targetUrl (your deployed Edge Function URL), resource ('messages'), event ('created'), and optionally filter to restrict to a specific room. The registration must use a user-level token or bot token — the Bot can receive messages posted in Spaces where it is a member. Your webhook handler Edge Function receives events with a data object containing message ID, room ID, and person ID. To get the actual message text, make a follow-up API call to GET https://webexapis.com/v1/messages/{messageId} using the Bot token. This two-step pattern (webhook notification + message fetch) is Webex's standard webhook design. For complex multi-command bot logic with database lookups and branching responses, RapidDev's team can help architect the full command routing and response generation system.