Adicionar CSS ou JavaScript à sua agenda

• Saiba mais sobre como adicionar HTML dentro de campos de texto
• Altere a aparência da sua agenda com CSS
• Altere a aparência do seu widget com CSS
• Descubra mais sobre trechos de JavaScript e como eles funcionam
• Aprenda como inserir JavaScript para integrar recursos dinâmicos à sua agenda
• Adicione opções extras ao usar scripts, como autotextos ou um trecho de analytics

Adicionar HTML dentro de campos de texto

• 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ário HTML em formulários personalizados, acessando Configurar > Design
• Nas caixas de mensagem de e-mail da página Configurar > Layout, se o HTML estiver ativado para e-mails

Alterar a aparência da sua agenda com CSS

Se você quiser adicionar estilos específicos a determinadas páginas da agenda para combiná-las com o seu site, por exemplo, pode usar CSS. Assim como os scripts, o CSS pode ser adicionado a cada caixa de mensagem que permite 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. Você precisará de algum conhecimento técnico básico para aplicar isso à sua agenda. Há duas maneiras de usar CSS no SuperSaaS: com CSS embutido ou com uma folha de estilo externa.

CSS embutido

CSS embutido é um método que permite aplicar estilos diretamente a elementos HTML individuais dentro da sua agenda. Isso é feito usando o atributo style na tag de abertura de um elemento HTML. Por exemplo, se quiser mudar a cor do texto de um parágrafo para verde e definir a fonte em 16 píxeis, você faria assim:

Este é um parágrafo com texto verde e tamanho de fonte de 16 píxeis.

CSS embutido é ótimo para alterar rapidamente o estilo de um elemento específico sem afetar o restante da página. No entanto, ele se torna menos prático quando você precisa aplicar o mesmo estilo a muitos elementos, porque terá de repetir o código diversas vezes.

CSS embutido em e-mails

O SuperSaaS oferece dois formatos de e-mail: texto simples e HTML. Por padrão, os e-mails são enviados em texto simples, o que só permite texto básico. Se quiser incluir imagens, HTML ou estilos como CSS, ative a formatação HTML para e-mails na página Configurações de layout. Em e-mails, você precisa usar CSS embutido, porque clientes de e-mail não suportam folhas de estilo da mesma forma que páginas da web. Depois de ativar o formato HTML para mensagens de e-mail, você poderá aplicar CSS embutido como explicado acima.

Usando uma folha de estilo externa

Embora o CSS embutido seja útil para pequenas mudanças, ele se torna difícil de manter quando você tem muito CSS. Nesses casos, pode ser melhor usar uma folha de estilo externa. Para vinculá-la, é importante que essa folha de estilo esteja acessível em outro servidor, já que não é possível armazenar arquivos CSS diretamente no SuperSaaS. A estrutura básica para vincular uma folha de estilo externa é:

Depois de aplicar o CSS no código-fonte das caixas de mensagem que aceitam HTML, clique em “Salvar” e visite a página para confirmar que o estilo foi aplicado corretamente.

Adicionando CSS ao seu widget

Você também pode adicionar CSS a um widget de agenda incorporado ao seu site. Se quiser personalizar o estilo do widget, poderá adicionar seu próprio CSS, que será inserido entre tags de estilo em cada frame, ou vincular uma folha de estilo externa. No entanto, lembre-se de que a estrutura e os identificadores do widget podem mudar com futuras atualizações, então não conte com eles como se fossem 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 a personalização do widget do SuperSaaS, consulte nossa documentação para desenvolvedores.

Usando scripts no SuperSaaS

Scripts JavaScript podem ser úteis para integrar recursos dinâmicos às páginas da sua agenda ou aos formulários, enriquecendo o processo de reserva. Você pode integrar diferentes serviços ou funções, como chat ao vivo, botões, contadores regressivos ou códigos de rastreamento para serviços como Google Analytics ou Bing.

Por exemplo, o trecho abaixo adiciona um botão pop-up como este , que pode ser usado para mostrar informações adicionais quando clientes reservam pela sua página.

Como inserir um script

1. Encontre sua caixa de mensagem: Vá até a caixa de mensagem onde deseja adicionar o script JavaScript. Ela pode estar em qualquer um dos locais mencionados acima
2. Abra o campo de código-fonte: Clique no botão < > da barra de ferramentas para abrir o campo de código-fonte
3. Copie o seu script: Pegue o trecho de código do serviço ou da função que deseja integrar, como um botão de chat ao vivo para atendimento ou um serviço de analytics, como Google Analytics
4. Adicione ao campo de código-fonte e salve: cole o trecho de código no campo de código-fonte no SuperSaaS e clique em salvar. Depois, role até o fim da página de layout e clique em salvar alterações
5. Teste: Depois de salvar, visite a página em que o trecho foi aplicado para garantir que o script esteja funcionando corretamente. Se precisar do mesmo código em várias páginas, repita o processo em cada caixa de mensagem personalizada

Opções extras dentro do SuperSaaS

Usando autotexto com scripts

As sequências de autotexto são um conjunto de “palavras mágicas” substituídas automaticamente por outra informação quando a mensagem é gerada. Autotextos são úteis em e-mails e mensagens na tela, mas também podem ser usados em HTML em conjunto com scripts. Na página de personalização de mensagens na tela você encontra todas as instruções de autotexto que podem ser usadas com HTML.

Autotexto também pode ser usado para adicionar scripts condicionalmente. Por exemplo, para incluir um script apenas se um pagamento tiver sido concluído com sucesso. Para isso, basta colocar o trecho de código dentro das chaves da instrução condicional.