Download the PHP package elxdigital/cta-button without Composer

Botão CTA (Call to Action)

Esta dependência foi criada para otimizar a alta frequência de uso em projetos próprios da Ellox, onde sites institucionais tendem a recorrer deste recurso com alta demanda, se tratando de seu objetivo principal.

Requisitos:

• php >=8.0
• ext-pdo
• league/plates 3.*
• ext-mbstring
• phpmailer/phpmailer
• vlucas/phpdotenv
• jQuery e jQuery Mask
• Bootstrap 4

• Se já criada a tabela cta_button, é indiscutível que tenha, pelo menos, os seguintes campos:

• Ter as seguintes constantes previamente declaradas:
  • url:
  • CONF_URL_BASE - url utilizada
  • CONF_URL_TEST - url utilizada
  • data base:
  • CONF_DB_HOST - database host
  • CONF_DB_NAME - database name
  • CONF_DB_USER - database user
  • CONF_DB_PASS - database password
  • CONF_DB_PORT - database port
  • email:
  • CONF_MAIL_HOST - mail host
  • CONF_MAIL_PORT - mail port
  • CONF_MAIL_USER - mail user
  • CONF_MAIL_PASS - mail password
  • CONF_MAIL_SENDER_NAME - nome para endereço de e-mail
  • CONF_MAIL_SENDER_ADDRESS - endereço de e-mail
  • CONF_MAIL_TEST_NAME - nome para endereço de e-mail de testes
  • CONF_MAIL_TEST_ADDRESS - endereço de e-mail de testes

Recurosos disponíveis:

Campo de formulário HTML do tipo 'select' com as seguintes opções:

• Formulário para Captura de Leads
• Redirecionamento Direto para WhatsApp
• Redirecionamento para Link Externo

Qual é o objetivo de cada um deles?

✔️ Formulário para Captura de Leads + Redirecionamento para WhatsApp

Vista abrir uma modal com um formulário de lead, onde o usuário do site preenche seus dados e, após preencher o formulário e enviar, redirecionar o usuário para uma conversa do WhatsApp.

• Campos preenchidos: número do contato do WhatsApp e (opcional) mensagem a ser enviada na conversa.

✔️ Formulário para Captura de Leads

Vista abrir uma modal com um formulário de lead, onde o usuário do site preenche seus dados, ficando a responsabilidade do destino ou manipulação dos dados a cargo do sistema.

• Campos preenchidos: formulário a ser preenchido.

✔️ Redirecionamento Direto para WhatsApp

Vista redirecionar o usuário, sem nenhum tipo de intermediação, para uma conversa do WhatsApp.

• Campos preenchidos: contato do WhatsApp e (opcional) mensagem a ser enviada na conversa.

✔️ Redirecionamento para Link Externo

Vista redirecionar o usuário para um link de página interna (do próprio site) ou externa.

• Campos preenchidos: link de redirecionamento.

  Obs.: Para redirecionar para um link externo, preencha-o de forma completa (protocolo, domínio e caminho, se tiver). Para links internos, preencha somente o caminho para a página. Exemplo:

  Link externo: https://google.com.br Link interno: /sobre, /produtos, etc...

Como usar?

Adicionar dependência ao projeto:
composer require elxdigital/cta-button

Copiar arquivos de estilo/script para acesso público:
cp -r vendor/elxdigital/cta-button/src/template/assets src/template/assets

Copiar formulário de lead padrão para acesso público:
cp -r vendor/elxdigital/cta-button/src/template/forms src/template/forms

Copiar template de e-mail para acesso público:
cp -r vendor/elxdigital/cta-button/src/template/shared src/template/shared

Copiar arquivo de rotas para acesso público:
cp -r vendor/elxdigital/cta-button/src/routes src/routes

Onde você carrega seus estilos e scripts públicos, terá que adicionar o seguinte (adaptando a url oficial de seu site):

Da mesma forma, no lugar onde carrega os estilos e scripts da parte administrativa do site, deverá ter o seguinte:

Parte do Painel Administrativo (admin):

• Button - Instanciar a classe principal.
  • Ex.: new \ElxDigital\CtaButton\Button();

Métodos

• renderPrivate - renderiza o select no painel administrativo do site, ou seja, na parte de quem está gerenciando o conteúdo do site vê.
  • Parâmetros (já na ordem devidamente passada ao método):
  • field_name - atributo name do input no formulário principal, ou seja, nome da coluna na tabela que você deseja salvar essa FK.
  • identificador - identificador utilizado para diferenciar botões, mesmo que estes tenham o mesmo nome na FK.
  • formularios - formulários disponíveis no seu site, aparecerão no select caso o objetivo do botão seja conversão de leads.
  • btn_cta_id (opcional) - caso já tenha um botão cadastrado na tabela, esse id da FK é passado neste parâmetro.

Parte no Site (público):

• Button - Instanciar a classe principal.
  • Ex.: new \ElxDigital\CtaButton\Button("caminho_para_views");
  • Parâmetro:
  • template_path - caminho/path para os templates do seu site.

Métodos

• renderPublic - renderiza o botão no site, ou seja, na parte que o usuário final vê.
  • Parâmetro:
  • btn_cta_id - id do botão que deseja ser renderizado na tela e acessado pelos usuários do site.
  • btn_classes (opcional) - array de estilos, com flexibilidade para passar qualquer atributo possível em uma tag \ do HTML.
  • span (opcional) - boolean, se quiser que o conteúdo da tag \ seja envolto em uma tag \, por padrão: false.
  • span_classes (opcional) - array de estilos, com flexibilidade para passar qualquer atributo possível no span, se o parâmetro anterior for true.
  • content_before (opcional) - string para passar um HTML caso queira adicionar algum conteúdo antes do texto principal do botão.
  • content_after (opcional) - string para passar um HTML caso queira adicionar algum conteúdo depois do texto principal do botão.