Skip to content

Commit f07b8fa

Browse files
magdielcardosomagdielcardoso
committed
Criando repositório
0 parents  commit f07b8fa

File tree

3 files changed

+435
-0
lines changed

3 files changed

+435
-0
lines changed

‎.github/FUNDING.yml‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Configurações de financiamento para GitHub Sponsors
2+
3+
# GitHub Sponsors
4+
github: [seu-usuario-do-github]
5+
6+
# Opções de financiamento externas
7+
custom: ['https://pix.exemplo.com.br/seu-pix', 'https://paypal.me/seupaypal']
8+
# Notas sobre doações:
9+
# - A chave PIX é: seu-email@exemplo.com.br
10+
# - QR Code PIX: Disponível ao acessar o primeiro link
11+
# - Outros métodos: PayPal e transferência bancária disponíveis no segundo link

‎README.md‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
# Scripts para Chatwoot
2+
3+
Scripts prontos para uso em sua instalação do Chatwoot que adicionam funcionalidades extras para o Kanban.
4+
5+
## Requisitos
6+
7+
- [Kanban para Chatwoot](https://kanbanparachatwoot.com.br/) - Solução completa para visualização em Kanban no Chatwoot
8+
9+
## Como Instalar
10+
11+
### Método Correto de Instalação
12+
13+
1. Adquira o Kanban para Chatwoot em [kanbanparachatwoot.com.br](https://kanbanparachatwoot.com.br/)
14+
2. Acesse sua instalação do Chatwoot com uma conta de super admin
15+
3. Navegue até `https://seuchatwoot.com/super_admin/dashboard_scripts`
16+
4. Cole o conteúdo do script no campo "Script Code"
17+
5. Clique em "Salvar Scripts"
18+
19+
## Criando Scripts Personalizados
20+
21+
Para criar seus próprios scripts para o Kanban para Chatwoot, siga este modelo:
22+
23+
```html
24+
<script>
25+
document.addEventListener('DOMContentLoaded', function () {
26+
// Função principal para implementar a funcionalidade
27+
function aplicarFuncionalidade() {
28+
// Verificar se o elemento já existe para evitar duplicação
29+
if (document.getElementById('seu-elemento-id')) return;
30+
31+
// 1. Criar elemento de estilo para injetar CSS personalizado
32+
const style = document.createElement('style');
33+
34+
// 2. Definir estilos CSS
35+
style.innerHTML = `
36+
/* Seus estilos CSS aqui */
37+
#seu-elemento-id {
38+
position: fixed;
39+
bottom: 20px;
40+
right: 20px;
41+
/* Mais estilos */
42+
}
43+
`;
44+
45+
// 3. Adicionar o estilo ao head do documento
46+
document.head.appendChild(style);
47+
48+
// 4. Criar elementos DOM necessários
49+
const seuElemento = document.createElement('div');
50+
seuElemento.id = 'seu-elemento-id';
51+
seuElemento.innerHTML = `
52+
<!-- Seu HTML aqui -->
53+
`;
54+
55+
// 5. Adicionar elementos ao DOM
56+
document.body.appendChild(seuElemento);
57+
58+
// 6. Adicionar eventos e comportamentos
59+
seuElemento.addEventListener('click', function () {
60+
// Lógica do evento
61+
});
62+
}
63+
64+
// Executar imediatamente
65+
aplicarFuncionalidade();
66+
67+
// Também executar quando houver mudanças dinâmicas na DOM
68+
const observer = new MutationObserver(function () {
69+
aplicarFuncionalidade();
70+
});
71+
72+
observer.observe(document.body, { childList: true, subtree: true });
73+
});
74+
</script>
75+
```
76+
77+
### Diretrizes para Criação de Scripts:
78+
79+
1. **Verifique duplicações**: Sempre verifique se o elemento já existe antes de adicioná-lo
80+
2. **Use IDs únicos**: Evite conflitos com outros elementos da página
81+
3. **Inclua um observer**: O MutationObserver garante que seu script funcione mesmo quando o DOM é alterado dinamicamente
82+
4. **Encapsule a lógica**: Mantenha todo o código dentro da função principal para evitar poluir o namespace global
83+
5. **Comente seu código**: Adicione comentários explicativos para facilitar a manutenção
84+
85+
### Exemplos de Funcionalidades:
86+
87+
- Botões flutuantes para ações rápidas
88+
- Atalhos de teclado personalizados
89+
- Integrações com APIs externas
90+
- Personalização visual do Kanban
91+
- Automações para processos repetitivos
92+
93+
### Exemplo Prático: Botão de Chamada para Kanban
94+
95+
Abaixo um exemplo específico de um script que adiciona um botão de chamada telefônica no Kanban:
96+
97+
```html
98+
<script>
99+
document.addEventListener('DOMContentLoaded', function () {
100+
// Função principal para adicionar botão de chamada
101+
function adicionarBotaoChamada() {
102+
// Verificar se o botão já existe para evitar duplicação
103+
if (document.getElementById('kanban-call-button')) return;
104+
105+
// 1. Criar elemento de estilo para o botão
106+
const style = document.createElement('style');
107+
style.innerHTML = `
108+
#kanban-call-button {
109+
position: fixed;
110+
bottom: 20px;
111+
right: 20px;
112+
width: 56px;
113+
height: 56px;
114+
border-radius: 50%;
115+
background-color: #84CC16;
116+
color: white;
117+
display: flex;
118+
align-items: center;
119+
justify-content: center;
120+
cursor: pointer;
121+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
122+
z-index: 9999;
123+
transition: all 0.3s ease;
124+
}
125+
126+
#kanban-call-button:hover {
127+
transform: scale(1.1);
128+
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
129+
}
130+
`;
131+
132+
document.head.appendChild(style);
133+
134+
// 2. Criar o botão com ícone de telefone
135+
const button = document.createElement('div');
136+
button.id = 'kanban-call-button';
137+
button.innerHTML = `
138+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
139+
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
140+
</svg>
141+
`;
142+
143+
// 3. Adicionar evento de clique que extrai o telefone do card selecionado
144+
button.addEventListener('click', function () {
145+
// Obter o card selecionado no Kanban
146+
const selectedCard = document.querySelector('.kanban-card.selected');
147+
148+
if (selectedCard) {
149+
// Extrair número de telefone do card (exemplo)
150+
const phoneElement = selectedCard.querySelector('.contact-phone');
151+
const phone = phoneElement ? phoneElement.textContent.trim() : '';
152+
153+
if (phone) {
154+
// Iniciar chamada (isso depende da sua implementação)
155+
alert(`Iniciando chamada para: ${phone}`);
156+
// Aqui você poderia integrar com alguma API de chamadas
157+
} else {
158+
alert('Nenhum telefone encontrado no card selecionado');
159+
}
160+
} else {
161+
alert('Selecione um card do Kanban para fazer uma chamada');
162+
}
163+
});
164+
165+
// 4. Adicionar o botão ao DOM
166+
document.body.appendChild(button);
167+
}
168+
169+
// Executar imediatamente
170+
adicionarBotaoChamada();
171+
172+
// Também executar quando houver mudanças dinâmicas na DOM
173+
const observer = new MutationObserver(function () {
174+
adicionarBotaoChamada();
175+
});
176+
177+
observer.observe(document.body, { childList: true, subtree: true });
178+
});
179+
</script>
180+
```
181+
182+
Este exemplo demonstra como adicionar um botão flutuante que pode interagir com os cards do Kanban. Você pode personalizar a funcionalidade conforme suas necessidades específicas.
183+
184+
## Contribuições
185+
186+
Se você possui sugestões para melhorar os scripts e a integração, entre em contato através da comunidade no Whatsapp do Kanban para Chatwoot.
187+
188+
## Suporte
189+
190+
Para suporte e dúvidas sobre a instalação, acesse a comunidade no Whatsapp do Kanban para Chatwoot após a compra.
191+

0 commit comments

Comments
 (0)