Como adicionar a Agenda Prática ao seu site

A Agenda Prática é uma plataforma de gerenciamento de agenda. Com ela você pode receber agendamentos online para o seu negócio. Para isso é necessário criar a sua conta, configurar a agenda e inserir no seu site.

Como você pode ver aqui no blog, você pode inserir a agenda no seu site de duas formas:

Link no menu:

Copie o link da sua agenda disponível no seu dashboard e adicione ao menu do seu site. Seu link será algo como:

<a href="http://agenda-pratica.agendapratica.biz" target="_blank">Agenda</a>

Você pode conferir o resultado em nossa demonstração no menu superior deste blog, clicando em “Agenda”.

Widget:

Você pode incorporar a agenda como um widget no seu site, basta adicionar o seguinte código, substituindo o conteúdo de data-slug por seu código único.

<div id="agenda-pratica-widget" data-slug="sua-empresa"  data-disposition="vertical" data-calendar="true" data-show-filters="true" data-schedule-button="true" data-search-button="true" data-search-start-open="true"></div>
<script src="https://agendapratica.biz/js/schedule/widget.js" type="text/javascript"></script>

É importante que a <div> seja declarada antes da chamada do script, ou seja ela deve existir na página antes do script carregar as demais dependências.

Algumas configurações de layout podem ser configuradas com as tags a seguir.

data-disposition : Define se o widget será disposto na vertical (geralmente utilizado na coluna à direita ou esquerda do site) ou na horizontal (Agenda intermediando duas seções do site). Utilize os valores vertical ou horizontal.

data-calendar : Define se exibirá o calendário no widget. Utilize os valores true para exibir ou false para ocultar.

data-show-filters : Define se exibirá o os filtros de unidade / profissional / sala / serviço no widget. Utilize os valores true para exibir ou false para ocultar.

data-schedule-button : Define se exibirá o botão de criar um novo agendamento no widget. Utilize os valores true para exibir ou false para ocultar.

data-search-button : Define se exibirá o botão de buscar próximos agendamentos disponíveis no widget. Utilize os valores true para exibir ou false para ocultar.

data-search-start-open : Define se os próximos agendamentos disponíveis serão exibidos ao carregar o widget. Utilize os valores true para exibir ou false para ocultar.

Você pode adicionar CSS adicional para formatar sua agenda:

<style>
	#agenda-pratica-widget .search-schedule-results button {
		font-size: 10px;
	}
	#agenda-pratica-widget .btn {
		color: #FFF;		
	}
</style>

Para conferir o resultado, veja no blog à sua direita, o conteúdo de “Agenda”.

Gostou da Agenda PráticaCurta a página no FacebookInstagram ou siga no Twitter para ficar por dentro das novidades

Siga-nos:

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *