> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://ajuda.greatsoftwares.com.br/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Como utilizar a EXTENSÃO GREATASSISTANT do GreatPages

A extensão foi criada para facilitar o trabalho dentro do editor da plataforma, permitindo aplicar efeitos, capturar IDs e gerar códigos automaticamente de forma prática e segura. Abaixo, você confere como **instalar e utilizar** todas as funções disponíveis.

---

# Instalação da extensão

Para começar, é necessário instalar a extensão em seu navegador Google Chrome. 

1. Acesse o link oficial de instalação da **Extensão** - https://chromewebstore.google.com/detail/greatassistant/oemgomchjnagihocbmefjehngaekoigf?hl=pt-br
2. Clique em **Adicionar ao Chrome**.
3. Confirme clicando em **Adicionar extensão**.
4. Após a instalação, o ícone da extensão aparecerá no canto superior direito do navegador (próximo à barra de endereço).
5. Clique no ícone de **extensões (peça de quebra-cabeça)** e fixe a e**xtensão** para acesso rápido.

|| Dica: Caso o botão “Adicionar extensão” não apareça, verifique se você está usando o navegador Google Chrome atualizado.

# Acesso e visão geral

1. Acesse a **página publicada** que deseja editar no GreatPages.
2. Clique no ícone da extensão.
3. A interface exibirá as seções disponíveis:
* Identificação de ID
* Delays
* Degradês
* Efeitos
* WhatsApp Flutuante
4. Durante a seleção de elementos/blocos será exibido uma marcação no canto superior direito, verde significa que a seleção está ativa, vermelha/transparente está desativada.

Cada área possui uma função específica explicada nas próximas seções.

---

# Identificação de ID

Essa função identifica o **ID de blocos ou elementos** da página, utilizado em scripts e personalizações.

1. Clique no botão de **Identificar**.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_5iw013.png =430x507)

2. Selecione o **bloco ou elemento** desejado na página.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1x007vb.png =430x328)

3. Pressione **ESC para finalizar a seleção; os ID(s) aparecerão automaticamente na lista.**

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_15bnnh3.png =430x614)

5. Clique sobre o ID para **copiar** ou clique no **X** para remover.

---

# Delays (Exibição temporizada)

A função **Delays** permite mostrar blocos ou elementos **após um tempo determinado** em segundos.

### Blocos

1. Clique em **Identificar Blocos** e selecione os blocos desejados na página.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1dmimbq.png =430x591)

2. Pressione **ESC** para finalizar a seleção, os blocos selecionados serão exibidos em formato de lista dentro da extensão. **Você pode visualizar ou remover qualquer bloco da lista** a qualquer momento, clicando no ícone de “X”.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1iknljo.png =430x212)

3. Defina o **tempo de exibição** (ex: 5 segundos).

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1livkty.png =430x146)

4. Clique em **Gerar** para criar o código.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_12jcpkh.png =430x500)

5. Acesse o editor do **GreatPages** e clique no **ícone de engrenagem** no canto superior direito da tela. Em seguida, clique em **"Javascript/CSS"** e depois em **"Adicionar código"**.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1mdv2of.png =430x298)

6. Cole o código gerado pela extensão, marque a opção "**Funcionamento**".

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_sda97c.png =420x541)

7.  **Importante:** clique nos blocos que receberão o delay, clique em **editar** e **oculte-os no desktop e mobile**. Essa ação é necessária para que o código mostre esses blocos automaticamente após o tempo configurado.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_mpkf7e.png =430x1314)

8. Clique no botão **“Atualizar”** (laranja) para salvar as alterações.

### Elementos

1. Clique em **Identificar** e selecione os itens desejados.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_ushzku.png =430x502)

2.  Pressione **ESC** para finalizar a seleção, os elementos selecionados serão exibidos em formato de lista dentro da extensão. **Você pode visualizar ou remover qualquer elemento da lista a qualquer momento**, clicando no ícone de “X”.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_qpd9on.png =430x215)

3. Defina o **tempo de exibição** (ex: 5 segundos).

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_gykpuc.png =430xauto)

4. Clique em **Gerar** para criar o código.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1i1jy7c.png =430x496)

5. Acesse o editor do **GreatPages** e clique no **ícone de engrenagem** no canto superior direito da tela. Em seguida, clique em **"Javascript/CSS"** e depois em **"Adicionar código"**.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_konfu7.png =430x298)

6. Cole o código gerado pela extensão, marque a opção "**Funcionamento**".

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_n93dst.png =430x964)

||| Diferente do delay de blocos, não é necessário ocultar os elementos no editor.

# Degradês
Crie efeitos de gradiente em **blocos e elementos**, escolhendo cores e direção.

### Blocos

1. Escolha o **tipo de degradê** (ex: Linear 45°).

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/branco_1oztbmm.png =920x223)

2. Selecione as **duas cores** do gradiente.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1d273vh.png =430x269)

3. Clique em **Identificar** e selecione os blocos desejados.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_myobzk.png =430x679)

4. Pressione **ESC** para finalizar a seleção, os blocos selecionados serão exibidos em formato de lista dentro da extensão. **Você pode visualizar ou remover qualquer bloco da lista a qualquer momento**, clicando no ícone de “**X**”.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_16f38f0.png =430x132)

5. Clique em **Gerar** para obter o código.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_i1ywrt.png =430x672)

6. Acesse o editor do **GreatPages** e clique no **ícone de engrenagem** no canto superior direito da tela. Em seguida, clique em **"Javascript/CSS"** e depois em **"Adicionar código"**.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_wp4yex.png =430x298)

7. Cole o código gerado pela extensão, marque a opção "**Funcionamento**".

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_guc2ew.png =430x772)

8. Atualize o editor, no botão laranja "Atualizar".

### Elementos

1. Escolha o **tipo de degradê** (ex: Linear 45°).

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1iu4szr.png =920x223)

2. Clique em **Identificar** e selecione os elementos da página.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_rvv13s.png =430x674)

3.  Pressione **ESC** para finalizar a seleção, os elementos selecionados serão exibidos em formato de lista dentro da extensão. **Você pode visualizar ou remover qualquer elemento da lista a qualquer momento**, clicando no ícone de “X”.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_z9ju0g.png =420x120)

4. Clique em **Gerar** para criar o código pronto.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_8vbf74.png =430x656)

5. Acesse o editor do **GreatPages** e clique no **ícone de engrenagem** no canto superior direito da tela. Em seguida, clique em **"Javascript/CSS"** e depois em **"Adicionar código"**.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_3xcbm0.png =430x298)

6. Cole o código gerado pela extensão, marque a opção "**Funcionamento**".

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_gk749.png =420x747)

7. Atualize o editor, no botão laranja "Atualizar".

||| O degradê não funcionará para textos, ficará como plano de fundo.

---

# Efeitos

Adicione efeitos visuais simples e atrativos aos elementos da página.

### Efeito Pulse

1. Em **Efeito Pulse**, escolha a **cor do efeito**.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_18usa2x.png =430x521)

2. Clique em **Identificar** e selecione os elementos desejados.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1xdxta3.png =430x629)

3. Pressione **ESC** para finalizar a seleção, os elementos selecionados serão exibidos em formato de lista dentro da extensão. **Você pode visualizar ou remover qualquer elementos da lista a qualquer momento**, clicando no ícone de “X”.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_17j8kvl.png =430x126)

4. Clique em **Gerar** para gerar o código de animação

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1uc3a61.png =430x635)

5. Acesse o editor do **GreatPages** e clique no **ícone de engrenagem** no canto superior direito da tela. Em seguida, clique em **"Javascript/CSS"** e depois em **"Adicionar código"**.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_6cfeyp.png =430x298)

6. Cole o código gerado pela extensão, marque a opção "**Funcionamento**".

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1mdttq2.png =430x770)

7. Atualize o editor, no botão laranja "Atualizar".

### Efeito Flutuante

1. Clique em **Identificar** e selecione os elementos desejados.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_rao6em.png =430x381)

2. Pressione **ESC** para finalizar a seleção, os elementos selecionados serão exibidos em formato de lista dentro da extensão. **Você pode visualizar ou remover qualquer elementos da lista a qualquer momento**, clicando no ícone de “X”.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_ndbh50.png =430x126)

3. Clique em **Gerar** para gerar o código de animação.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_mhv893.png =430x371)

4. Acesse o editor do **GreatPages** e clique no **ícone de engrenagem** no canto superior direito da tela. Em seguida, clique em **"Javascript/CSS"** e depois em **"Adicionar código"**.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_mzdc8a.png =430x298)

5. Cole o código gerado pela extensão, marque a opção "**Funcionamento**".

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1gmerdp.png =430x772)

6. Atualize o editor, no botão laranja "Atualizar".

---

# WhatsApp Flutuante

Crie um botão fixo de contato via WhatsApp para sua página.

1. Preencha o **DDI** (ex: 55 para Brasil) e o número completo com DDD, sem traços ou espaços. Exemplo: `5511999998888`.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_x3gec4.png =430x153)

2. Clique em **Gerar** e **Copiar Código** criar o botão.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1x9la3f.png =430x331)

3. Acesse o editor do **GreatPages** e clique no **ícone de engrenagem** no canto superior direito da tela. Em seguida, clique em **"Javascript/CSS"** e depois em **"Adicionar código"**.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_mzdc8a.png =430x298)

4. Cole o código gerado pela extensão, marque a opção "**Funcionamento**".

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1nvidge.png =430x766)

5. Atualize o editor, no botão laranja "**Atualizar**".

||| No modo de pré-visualização, o botão não abrirá o link do WhatsApp por motivos de segurança. Teste no modo publicado.

---

# Dicas finais

* Caso perceba comportamento incorreto, atualize e tente novamente.
* O nome da página atual é exibido no rodapé da extensão.
* O elemento de formulário utiliza o **mesmo ID** em todos os seus componentes. Portanto, ao adicionar qualquer efeito ou código direcionado ao botão, esse ajuste será aplicado **ao formulário inteiro**, e não apenas ao botão.

Ficou com alguma dúvida? Acione nosso suporte. Estamos sempre à disposição para ajudar! 😊