Adicionar CSS ou JavaScript à sua agenda

Esta página explica como personalizar suas mensagens na tela usando HTML, permitindo que você incorpore CSS e scripts JavaScript. O CSS permite estilizar páginas, enquanto os scripts JavaScript podem adicionar recursos (visuais) ao seu site, como alterar conteúdo, registrar informações e muito mais.

Saiba mais sobre como adicionar HTML dentro de campos de texto
Altere o visual da sua agenda com CSS
Altere o visual do seu widget com CSS
Descubra mais sobre trechos de JavaScript e como eles funcionam
Aprenda a inserir JavaScript para integrar recursos dinâmicos à sua agenda
Adicione opções extras ao usar scripts, como texto automático ou trechos de código para analytics

Adicionar HTML dentro de campos de texto

No SuperSaaS, HTML, CSS e JavaScript só podem ser inseridos em campos de texto que permitem conteúdo HTML. Existem quatro locais onde você pode adicionar HTML:

Na caixa de mensagem em Configurações de Layout
Nas caixas de mensagem localizadas em cada agenda na página Configurar > Layout
Na caixa de comentários HTML em formulários personalizados, acessando Configurar > Design
Nas caixas de mensagem de e-mail na página Configurar > Layout, se o HTML estiver ativado para mensagens de e-mail

Contas gratuitas podem não ter permissão para usar JavaScript. Você pode precisar entrar em contato com o suporte para solicitar essa permissão. Não é possível adicionar JavaScript a mensagens de e-mail.

Alterar o visual da sua agenda com CSS

Se quiser aplicar estilos específicos às páginas da agenda para combinar com o seu site, você pode usar CSS. Assim como os scripts, o CSS pode ser adicionado a qualquer caixa de mensagem que permita HTML. Clique no botão < > na barra de ferramentas da caixa de mensagem para abrir o campo de código-fonte e inserir seu CSS. É necessário algum conhecimento técnico básico para aplicar isso na sua agenda. Há duas formas de usar CSS no SuperSaaS: CSS embutido ou por meio de uma folha de estilo externa.

CSS embutido

CSS embutido permite aplicar estilos diretamente a elementos HTML individuais dentro da sua agenda. Isso é feito usando o estilo de atributo na marcação de abertura de um elemento HTML. Por exemplo, para alterar a cor do texto de um parágrafo para verde e definir o tamanho da fonte para 16 pixels:


	<p style="color: green; font-size: 16px;"> Este é um parágrafo com texto verde e tamanho de fonte de 16 pixels.</p>

Este é um parágrafo com texto verde e tamanho de fonte de 16 pixels.

CSS embutido é ótimo para mudanças rápidas em elementos específicos. No entanto, se precisar aplicar o mesmo estilo a vários elementos, pode ficar trabalhoso repetir o código.

CSS embutido em e-mails

O SuperSaaS oferece dois tipos de formato de e-mail: texto simples e HTML. Por padrão, os e-mails são enviados em texto simples. Se quiser incluir imagens, HTML ou estilos com CSS, ative o formato HTML para mensagens de e-mail na página Configurações de Layout. Em e-mails, é necessário usar CSS embutido, pois folhas de estilo não funcionam como em páginas da web. Após ativar o HTML, aplique CSS embutido conforme descrito acima.

Usando uma folha de estilo externa

Para alterações maiores, é melhor usar uma folha de estilo CSS externa. Você precisa hospedá-la em outro servidor, pois não é possível armazenar arquivos CSS diretamente no SuperSaaS. A estrutura básica para vincular a uma folha de estilo externa é:


	<link rel="stylesheet" href="https://{www.inseraseusite}/css/estilo.css">

Depois de aplicar o CSS no código-fonte da caixa de mensagem, clique em “Salvar” e visite a página para verificar se o estilo foi aplicado corretamente.

Adicionando CSS ao seu widget

Você também pode adicionar CSS a um widget da agenda incorporado ao seu site. Para personalizar o estilo do widget, você pode adicionar seu próprio CSS (usando marcações style-tag) ou vincular uma folha de estilo externa. Lembre-se de que a estrutura do widget pode mudar com futuras atualizações, então evite depender de identificadores fixos.

var supersaas = new SuperSaaS("demo", "Therapist", {"custom_css": "h1 {color:red}"})
var supersaas = new SuperSaaS("demo", "Therapist", {"custom_css": "https://….css"})

Para mais informações sobre como personalizar seu widget, consulte nossa documentação para desenvolvedores.

Usando scripts no SuperSaaS

Scripts JavaScript permitem integrar funcionalidades dinâmicas às páginas da sua agenda ou formulários. Você pode, por exemplo, integrar chat ao vivo, botões, contadores regressivos ou códigos de rastreamento (como Google Analytics ou Bing).

Exemplo: o trecho abaixo adiciona um botão pop-up como este para exibir informações adicionais no processo de reserva.


	<input onclick="window.open('//static.supersaas.net/img/demo_room.jpg', 'Popup', 'width=400,height=300')" type="button" value="Pop-up">

Como inserir um script

Encontre a caixa de mensagem: Vá até a caixa de mensagem onde deseja adicionar o script JavaScript.
Abra o código-fonte: Clique no botão < > para abrir o campo de código-fonte.
Copie seu script: Obtenha o código do serviço que deseja integrar, como um botão de chat ao vivo ou Google Analytics: Google Analytics
Adicione e salve: Cole o código no campo e clique em salvar. Depois, vá até o final da página de layout e clique em “Salvar alterações”.
Teste: Após salvar, visite a página para confirmar se o script foi aplicado corretamente. Se precisar do mesmo código em outras páginas, repita o processo em cada caixa personalizada.

Cada campo de texto pode conter até 3000 caracteres. Se precisar adicionar mais código, use a marcação src no seu script para vincular um arquivo HTML externo. Isso permite incluir mais JavaScript sem exceder o limite. Para melhorar o carregamento da página, adicione o atributo defer à marcação src.

Opções extras no SuperSaaS

Usando auto-texto com scripts

Auto-texto são palavras-chave especiais que são automaticamente substituídas por outras informações. Úteis em e-mails e mensagens na tela, também podem ser usadas com HTML e scripts. Na página personalização de mensagens na tela você encontra a lista completa de comandos de auto-texto disponíveis.

Auto-texto também pode ser usado condicionalmente, por exemplo, para adicionar um script somente após pagamento bem-sucedido.


	$if paid {Obrigado pela compra, $name <script>…</script>}

Graças ao comando condicional $if, o trecho de código será executado somente se o pagamento for bem-sucedido. Se o pagamento falhar ou se um administrador fizer a reserva, o script não será executado. Você também pode usá-lo para exibir um botão de chatbot apenas para usuários logados, ignorando superusuários.

Outras formas de rastrear reservas

Outra forma de rastrear reservas é adicionando uma URL personalizada em Configure > Processo na opção Para onde enviamos o usuário após criar uma reserva com sucesso?. Nessa página de “Obrigado”, você pode adicionar seu próprio script com o código de analytics.

Você pode usar palavras mágicas como $name, $id, $price, $slot_id, $email ou $lang na URL. Elas serão substituídas pelo nome, ID, valor, ID do horário, e-mail ou idioma do usuário. O script na página poderá então capturar essas informações.