Hello guys, im trying to build an app that uses endpoints on meta graph api (gaph.facebook.com), around the message templates manipulation(https://developers.facebook.com/docs/graph-api/reference/whats-app-business-account/message_templates/), so far so good, but i`m trying to develop a custom component to simulate whatsapp preview message, something alike this
i got this working code using react and so on (HTML/CSS/JS and the React.js library >https://docs.lowcoder.cloud/lowcoder-documentation/lowcoder-extension/custom-component 
import React, { useState } from "react";import { Card, CardContent } from "@/components/ui/card";import { Button } from "@/components/ui/button";import { Input } from "@/components/ui/input";import { Textarea } from "@/components/ui/textarea";import { MessageCircle } from "lucide-react";export default function WhatsAppSimulator() { const [title, setTitle] = useState("xxx"); const [message, setMessage] = useState( "Olá xxxx, esta é uma campanha realizada xxx, realize seu xxxx através do link abaixo!" ); const [footer, setFooter] = useState("Esta é uma mensagem automática."); const [buttonText, setButtonText] = useState("xxxx"); return ( <div className="flex flex-col items-center p-6 bg-gray-100 min-h-screen"> <h1 className="text-2xl font-bold mb-4">Simulador de Mensagens do WhatsApp</h1> <Card className="w-96 p-4 shadow-lg"> <CardContent className="bg-white p-4 rounded-lg border border-gray-200"> <p className="font-bold text-green-700">{title}</p> <p className="mt-2 text-gray-800">{message}</p> <p className="mt-2 text-gray-500 text-sm">{footer}</p> <div className="mt-4 flex items-center text-blue-600 cursor-pointer"> <MessageCircle className="mr-2" /> <span>{buttonText}</span> </div> </CardContent> </Card> <div className="mt-6 w-96 p-4 bg-white rounded-lg shadow-md border border-gray-200"> <h2 className="text-lg font-semibold mb-2">Personalizar Mensagem</h2> <Input placeholder="Título" value={title} onChange={(e) => setTitle(e.target.value)} className="mb-2" /> <Textarea placeholder="Mensagem" value={message} onChange={(e) => setMessage(e.target.value)} className="mb-2" /> <Input placeholder="Rodapé" value={footer} onChange={(e) => setFooter(e.target.value)} className="mb-2" /> <Input placeholder="Texto do Botão" value={buttonText} onChange={(e) => setButtonText(e.target.value)} className="mb-2" /> <Button className="w-full mt-2">Atualizar</Button> </div> </div> );}
but when i try to use it on lowcoder i get something like this
 |
