LOVABLE · BOLT · BASE44 → RECURSOS NATIVOS
Recursos nativos para apps do Lovable, Bolt e Base44: prompts para colar
Atualizado em 3 de novembro de 2026
Antes de colar um prompt
Cada recurso é um plugin do seu projeto no SaasToStore. O prompt muda seu site; o plugin coloca o recurso no app.
Adicione o plugin e gere um novo build
Abra a biblioteca de plugins do seu projeto, adicione o plugin e gere um novo build: um app gerado antes de adicioná-lo não tem o recurso. Os plugins funcionam nos builds Android nativos (Android Build (Native), Android TV) e nos apps iOS. Eles não estão no Android Build (Web) (TWA) nem no build de teste gratuito, que mostra seu site como app, sem plugins.
Teste no app, não na pré-visualização do editor
A pré-visualização do Lovable, Bolt e Base44 mostra seu site em um quadro do editor, e os plugins só funcionam no seu app, nunca em um quadro. Ali não acontece nada, e é o esperado: os prompts mantêm seu site funcionando sem eles. Publique seu site e abra seu app em um celular.
Seu site muda, o app acompanha
O app carrega seu site publicado. Quando o plugin já está no app, uma mudança que você publica no Lovable, Bolt ou Base44 chega ao app sem um novo build.
Onde colar o prompt
Cada prompt é independente: cole um de cada vez, confira o resultado e passe para o próximo. A IA adapta os nomes de arquivo ao seu projeto.
Lovable
Cole no chat do seu projeto. Quando a mudança estiver pronta, clique em Publish: o app carrega seu site publicado, não a pré-visualização.
Bolt
Cole no chat do Bolt e publique de novo, com o botão de deploy do Bolt ou na sua própria hospedagem. O app carrega o endereço publicado.
Base44
Cole no chat de IA do seu app e publique. O app carrega o endereço público do seu app.
Resposta háptica
Vibrações curtas que confirmam um toque, um sucesso ou um erro. Sem janela de permissão. O que a pessoa sente depende do celular e da configuração de vibração; no Android, um aparelho que não vibra (a maioria dos tablets e TVs) não faz nada.
Prompt · resposta háptica
Adicione resposta háptica ao meu projeto, com a ponte de app do SaasToStore.
Contexto: meu site também roda dentro de um app móvel nativo criado com o SaasToStore. Dentro desse app, `window.saastostore.haptics` faz o celular vibrar rapidamente. Em um navegador normal, e na pré-visualização do editor, isso não existe, e o site deve continuar funcionando exatamente como hoje. Não altere mais nada.
1. Se meu projeto ainda não tem `src/lib/saastostore.ts`, crie esse arquivo (`.js` se meu projeto não usa TypeScript); se ele existe, adicione só o que falta:
- `isInApp()`: retorna `typeof window !== "undefined" && navigator.userAgent.includes("SaasToStoreApp")`.
- `bridge()`: retorna `typeof window !== "undefined" ? window.saastostore : undefined`. Nunca leia `window.saastostore` durante a renderização no servidor.
- o tipo TypeScript de `window.saastostore` (opcional), com este membro opcional:
`haptics?: { impact(o?: { style?: "light" | "medium" | "heavy" }): Promise<{ ok: boolean; error?: string } | null>; notification(o?: { type?: "success" | "warning" | "error" }): Promise<{ ok: boolean; error?: string } | null>; selection(): Promise<{ ok: boolean; error?: string } | null> }`
2. No mesmo arquivo, adicione três funções que não fazem nada fora do app e nunca esperam o resultado:
- `tapFeedback()`: chama `bridge()?.haptics?.impact({ style: "light" })`.
- `successFeedback()`: chama `bridge()?.haptics?.notification({ type: "success" })`.
- `errorFeedback()`: chama `bridge()?.haptics?.notification({ type: "error" })`.
As promessas nunca são rejeitadas. Ignore um resultado com `ok: false` (por exemplo `not_available` em um celular que não vibra): nunca mostre isso à pessoa.
3. Chame `tapFeedback()` ao tocar em [MEUS BOTÕES PRINCIPAIS], `successFeedback()` quando [UM FORMULÁRIO, POR EXEMPLO O PAGAMENTO] der certo e `errorFeedback()` quando falhar.
4. Não faça vibrar ao rolar a página, a cada tecla digitada nem várias vezes seguidas.Substitua os valores entre [COLCHETES] antes de colar. Adicione o plugin no seu projeto e gere um novo build.
Leitor de QR code
Um botão Ler código que lê um QR code ou código de barras com a câmera: um ingresso, um produto, um link. No Android, o leitor é o do Google (serviços do Google Play) e seu app não pede permissão de câmera; celulares sem os serviços do Google Play, como Amazon Fire e Huawei, não têm esse leitor. No iOS, o app abre seu próprio leitor e pede a câmera na primeira vez. Teste com um código real em um celular real antes de publicar.
Prompt · leitor de QR code
Adicione um leitor de QR code ao meu projeto, com a ponte de app do SaasToStore.
Contexto: meu site também roda dentro de um app móvel nativo criado com o SaasToStore. Dentro desse app, `window.saastostore.barcode` abre o leitor de códigos do celular. Em um navegador normal, e na pré-visualização do editor, isso não existe, e o site deve continuar funcionando exatamente como hoje. Não altere mais nada.
1. Se meu projeto ainda não tem `src/lib/saastostore.ts`, crie esse arquivo (`.js` se meu projeto não usa TypeScript); se ele existe, adicione só o que falta:
- `isInApp()`: retorna `typeof window !== "undefined" && navigator.userAgent.includes("SaasToStoreApp")`.
- `bridge()`: retorna `typeof window !== "undefined" ? window.saastostore : undefined`. Nunca leia `window.saastostore` durante a renderização no servidor.
- o tipo TypeScript de `window.saastostore` (opcional), com este membro opcional:
`barcode?: { isAvailable(): Promise<{ available: boolean; reason?: string } | null>; scan(o?: { formats?: string[]; prompt?: string }): Promise<{ scanned: true; value: string; format: string } | { scanned: false; error: string } | null> }`
2. Em [A PÁGINA ONDE SE LÊ O CÓDIGO], mostre um botão "Ler um código" só quando `isInApp()` for true e `bridge()?.barcode?.isAvailable()` responder `available: true`. Caso contrário, deixe a página como está hoje (por exemplo um campo para digitar o código).
3. Ao tocar no botão, chame `bridge().barcode.scan({ formats: ["qr"], prompt: "[TEXTO ACIMA DO VISOR, 200 CARACTERES NO MÁXIMO]" })`. A promessa nunca é rejeitada:
- `scanned: true`: use `value` para [O QUE FAZER COM O CÓDIGO, POR EXEMPLO ABRIR O INGRESSO].
- `error: "cancelled"`: não faça nada, a pessoa fechou o leitor.
- `error: "not_allowed"` (iOS, câmera recusada): explique que a câmera pode ser liberada nas configurações do celular.
- qualquer outro erro: mostre uma mensagem curta.
4. `value` é um texto de origem desconhecida: confira antes de usar, nunca o insira na página como HTML e nunca o abra como link sem conferir que ele aponta para [MEU DOMÍNIO].Substitua os valores entre [COLCHETES] antes de colar. Adicione o plugin no seu projeto e gere um novo build.
Notificações locais (lembretes)
Um botão Lembrar-me que agenda uma notificação no celular, mostrada no horário escolhido mesmo com o app fechado: uma consulta, uma sessão que começa, um carrinho abandonado. Nenhum servidor participa: isso não é push e não alcança todos os seus usuários de uma vez. O Android mostra o lembrete com alguns minutos de margem; o iOS é pontual. Os lembretes sobrevivem a uma reinicialização do celular. Limites: 64 lembretes pendentes, até 366 dias de antecedência.
Prompt · notificações locais
Adicione lembretes (notificações locais) ao meu projeto, com a ponte de app do SaasToStore.
Contexto: meu site também roda dentro de um app móvel nativo criado com o SaasToStore. Dentro desse app, `window.saastostore.localNotifications` agenda notificações no próprio celular, sem servidor. Em um navegador normal, e na pré-visualização do editor, isso não existe, e o site deve continuar funcionando exatamente como hoje. Não altere mais nada.
1. Se meu projeto ainda não tem `src/lib/saastostore.ts`, crie esse arquivo (`.js` se meu projeto não usa TypeScript); se ele existe, adicione só o que falta:
- `isInApp()`: retorna `typeof window !== "undefined" && navigator.userAgent.includes("SaasToStoreApp")`.
- `bridge()`: retorna `typeof window !== "undefined" ? window.saastostore : undefined`. Nunca leia `window.saastostore` durante a renderização no servidor.
- o tipo TypeScript de `window.saastostore` (opcional), com este membro opcional:
`localNotifications?: { requestPermission(): Promise<{ granted: boolean; status: "granted" | "denied" | "prompt"; error?: string } | null>; schedule(o: { id?: number; title: string; body?: string; at?: number | string; in?: number; data?: object }): Promise<{ scheduled: true; id: number; at: number } | { scheduled: false; error: string; status?: string } | null>; cancel(o: { id: number }): Promise<{ ok: boolean; error?: string } | null>; getLastOpened(): Promise<{ notification: { id: number; title: string; body: string; at: number; data: object } | null } | null> }`
2. Em [O ITEM QUE MERECE UM LEMBRETE, POR EXEMPLO UMA RESERVA], mostre um botão "Lembrar-me" só quando `isInApp()` for true e `bridge()?.localNotifications` existir.
3. Ao tocar no botão (nunca ao carregar a página):
- chame primeiro `bridge().localNotifications.requestPermission()`. Se `granted` for false, explique que as notificações podem ser liberadas nas configurações do celular, e pare.
- depois chame `bridge().localNotifications.schedule({ id: [UM NÚMERO ÚNICO PARA ESTE ITEM], title: [TÍTULO, 200 CARACTERES NO MÁXIMO], body: [TEXTO CURTO], at: [O HORÁRIO, EM MILISSEGUNDOS OU date.toISOString()], data: { [O ID DO ITEM] } })`. Mostre "Lembrete agendado" quando `scheduled` for true, e uma mensagem curta caso contrário.
Essas promessas nunca são rejeitadas.
4. Quando a pessoa tocar na notificação, abra [A PÁGINA DO ITEM] com o id que vem em `data`:
- escute `window.addEventListener("s2s:localNotifications", (e) => …)` e aja quando `e.detail.type === "tap"`, com `e.detail.data`;
- chame também `bridge()?.localNotifications?.getLastOpened()` uma vez quando o app iniciar: se o app estava fechado, o evento saiu antes de a página escutar. Ele retorna `{ notification }` uma vez, depois `{ notification: null }`.
5. Quando o item for cancelado ou o lembrete não servir mais, chame `bridge()?.localNotifications?.cancel({ id })`.Substitua os valores entre [COLCHETES] antes de colar. Adicione o plugin no seu projeto e gere um novo build.
Confira o resultado
- Em um navegador normal: a página aparece e funciona como antes, sem nenhum botão que não faz nada.
- No seu app, gerado depois de adicionar o plugin: o botão aparece e faz o seu trabalho.
- Feche o menu de compartilhamento ou o leitor sem escolher nada: nenhuma mensagem de erro aparece.
- Recuse uma vez a permissão (notificações; câmera no iOS): a página diz o que fazer em vez de falhar sem avisar.
Perguntas frequentes
O mesmo prompt funciona no Lovable, Bolt e Base44?+
Sim. Cada prompt descreve a mudança, não uma ferramenta: o mesmo texto funciona no chat do Lovable, Bolt e Base44, e em outras ferramentas de IA que editam o código do seu site. A IA escolhe os nomes de arquivo certos para o seu projeto.
Por que nada acontece na pré-visualização do editor?+
A pré-visualização mostra seu site em um quadro do editor. Os plugins só funcionam no frame principal do seu app, nunca em um quadro nem em um navegador: ali window.saastostore não existe. Os prompts mantêm seu site funcionando sem ele. Para testar um recurso, publique seu site e abra seu app em um celular.
Preciso de um novo build depois de colar um prompt?+
Só para adicionar o plugin. Os plugins são gravados no app no momento do build: adicione o plugin na biblioteca de plugins do seu projeto e gere um novo build. Depois disso, uma mudança que você publica no seu site chega ao app sem um novo build, porque o app carrega seu site publicado.
Esses plugins estão incluídos no meu plano?+
Os plugins padrão estão incluídos nos planos pagos, sem licença por plugin: adicione quantos o seu app precisar. O build de teste grátis (Android, com o logo do SaasToStore) mostra o seu site como app, sem plugins.
Meu app vai pedir novas permissões?+
O compartilhamento nativo e a resposta háptica não pedem nada. O leitor de QR code pede a câmera no iOS, na primeira leitura; no Android ele usa o leitor do Google e não pede nada. As notificações locais pedem permissão no Android 13 e posteriores e no iOS, quando seu site chama requestPermission() a partir de um botão.
Posso enviar uma notificação para todos os meus usuários?+
Não com estes prompts. Uma notificação local é agendada pela sua página em um único celular, sem servidor. Uma mensagem enviada do seu servidor para os seus usuários é push, outro plugin.
Guias relacionados
Adicione o recurso ao seu app
Cole a URL do seu site, adicione os plugins no seu projeto e gere o build. Seu site continua funcionando no navegador.
Criar meu app