Prosas Embed Api 📐
Permite customizar e personalizar a prosas no seu site com o mínimo de código.
Antes de começar
O consumo das api`s da Prosas podem ser feitas apenas por clientes com o client_id fornecido pelo time de suporte. Se você tem acesso a essa documentação e não tem o client_id entre em contato com o suporte.
Principais conceitos
- Componente: Um componente HTML que representa um conjunto customizável.
- Atributos: São propriedades que podem ter seus valores alterados.
- Tema: Tema de um componente.
- Partes: Um componente possuí partes onde é possível aplicar o próprio CSS e customizar a aparência do componente. O CSS aplicado nas partes tem prioridade sobre o tema.
- Eventos: Um componente pode ter Eventos Customizados que são disparados quando alguma condição é respeitada. Vide a documentação de cada componente para mais informações.
Não exibir partes do layout com o atributo not-show
É possível remover algumas partes do layout usando o atributo not-show. Por exemplo, para remover o topo do layout padrão do componente prosas-edital basta passar o valor viewcard para o atributo not-show.
<prosas-edital ... not-show="viewcard"></prosas-edital>
É possível passar uma lista de partes do layout que não serão exibidas.
<prosas-edital ... not-show="informacao.image_logo,lateral"></prosas-edital>
📝 Obs: Cada componente define os pedaços do layout disponíveis para alteração. Portanto, consulte a documentação de cada componente para tais informações.
Atributos Globais
| Atributo | Obrigatório | Explicação |
|---|---|---|
| client-id | sim | UID do client. |
| locale | não | Especifíca qual idioma para as traduções. Idiomas disponíveis: "pt" (padrão), "es", "en". |
| not-show | não | Qualquer um dos valores a seguir separados por vígula: definido por cada componente. |
| class | não | Repassa atributo class para a div container de cada componente. |
| theme | não | Alternativa para setar o theme do componente ao inves de pegar do localStorage. |
Instalação
A instalação da Embed Api é feita adicionando a tag na página.
<!-- Página html -->
...
<script type="text/javascript" src="https://cdn.prosas.com.br/front-sdk/prod/latest/webcomponents.bundle.js"></script>
...