> ## 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).

# How to use the GREATASSISTANT EXTENSION for GreatPages

The extension was created to make working inside the platform editor easier, allowing you to apply effects, capture IDs and generate code automatically in a practical and safe way. Below you will find how to **install and use** all the available features.

---

# Installing the extension

To get started, you need to install the extension in your Google Chrome browser.

1. Go to the official **Extension** installation link - https://chromewebstore.google.com/detail/greatassistant/oemgomchjnagihocbmefjehngaekoigf?hl=pt-br
2. Click on **Add to Chrome**.
3. Confirm by clicking on **Add extension**.
4. After the installation, the extension icon will appear in the top right corner of the browser (next to the address bar).
5. Click on the **extensions icon (puzzle piece)** and pin the **extension** for quick access.

|| Tip: If the “Add extension” button does not appear, check whether you are using an up-to-date Google Chrome browser.

# Access and overview

1. Go to the **published page** you want to edit on GreatPages.
2. Click on the extension icon.
3. The interface will display the available sections:
* Identificação de ID
* Delays
* Degradês
* Efeitos
* WhatsApp Flutuante
4. While selecting elements/blocks, a marker will be displayed in the top right corner: green means the selection is active, red/transparent means it is disabled.

Each area has a specific function, explained in the next sections.

---

# Identificação de ID
This function identifies the **ID of blocks or elements** on the page, used in scripts and customizations.

1. Click on the **Identificar** button.

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

2. Select the desired **block or element** on the page.

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

3. Press **ESC to finish the selection; the ID(s) will appear automatically in the list.**

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

5. Click on the ID to **copy** it, or click on the **X** to remove it.

---

# Delays (Timed display)

The **Delays** function lets you show blocks or elements **after a set amount of time** in seconds.

### Blocks

1. Click on **Identificar Blocos** and select the desired blocks on the page.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1dmimbq.png =430x591)

2. Press **ESC** to finish the selection; the selected blocks will be displayed as a list inside the extension. **You can view or remove any block from the list** at any time by clicking on the “X” icon.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1iknljo.png =430x212)

3. Set the **display time** (e.g.: 5 seconds).
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1livkty.png =430x146)

4. Click on **Gerar** to create the code.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_12jcpkh.png =430x500)

5. Go to the **GreatPages** editor and click on the **gear icon** in the top right corner of the screen. Then click on **""Javascript/CSS""** and after that on **""Adicionar código""**.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1r5cskb.png =756xauto)

6. Paste the code generated by the extension and check the ""Operation"" option.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1ksqajc.png)

7.  **Important:** click on the blocks that will receive the delay, click on **editar** and **hide them on desktop and mobile**. This action is necessary so that the code shows these blocks automatically after the configured time.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_mpkf7e.png =430x1314)

8. Click on the **“**To update**”** button (orange) to save the changes.

### Elements

1. Click on Identify and select the desired items.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_ushzku.png =430x502)

2.  Press **ESC** to finish the selection; the selected elements will be displayed as a list inside the extension. **You can view or remove any element from the list at any time**, by clicking on the “X” icon.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_qpd9on.png =430x215)

3. Set the **display time** (e.g.: 5 seconds).
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_gykpuc.png =430xauto)

4. Click on **Gerar** to create the code.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1i1jy7c.png =430x496)

5. Go to the **GreatPages** editor and click on the **gear icon** in the top right corner of the screen. Then click on **""Javascript/CSS""** and after that on **""add** code**""**.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_konfu7.png =430x298)

6. Paste the code generated by the extension and check the ""Operation"" option.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_68pqfb.png)

||| Unlike the block delay, it is not necessary to hide the elements in the editor.

# Degradês
Create gradient effects on **blocks and elements**, choosing colors and direction.

### Blocks

1. Choose the **gradient type** (e.g.: Linear 45°).
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/branco_1oztbmm.png =920x223)

2. Select the **two colors** of the gradient.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1d273vh.png =430x269)

3. Click on identify and select the desired blocks.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_myobzk.png =430x679)

4. Press **ESC** to finish the selection; the selected blocks will be displayed as a list inside the extension. **You can view or remove any block from the list at any time**, by clicking on the “X” icon.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_16f38f0.png =430x132)

5. Click on **Gerar** to get the code.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_i1ywrt.png =430x672)

6. Go to the **GreatPages** editor and click on the **gear icon** in the top right corner of the screen. Then click on **""Javascript/CSS""** and after that on **""add code""**.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_9v3awk.png)

7. Paste the code generated by the extension and check the ""Operation"" option.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_77mich.png =349xauto)

8. Update the editor using the orange ""To update "" button.

### Elements

1. Choose the **gradient type** (e.g.: Linear 45°).
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1iu4szr.png =920x223)

2. Click on Identifyand select the elements on the page.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_rvv13s.png =430x674)

3.  Press **ESC** to finish the selection; the selected elements will be displayed as a list inside the extension. **You can view or remove any element from the list at any time**, by clicking on the “X” icon.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_z9ju0g.png =420x120)

4. Click on **Gerar** to create the ready-to-use code.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_8vbf74.png =430x656)

5. Go to the **GreatPages** editor and click on the **gear icon** in the top right corner of the screen. Then click on **""Javascript/CSS""** and after that on **""add code ""**.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_xnlk0d.png =585xauto)

6. Paste the code generated by the extension and check the ""Operation"" option.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_3f6fgc.png)

7. Update the editor using the orange ""To update "" button.

||| The gradient will not work on text; it will be applied as a background.

---

# Efeitos
Add simple and attractive visual effects to the elements on your page.

### Efeito Pulse

1. In **Efeito Pulse**, choose the **effect color**.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_18usa2x.png =430x521)

2. Click on Identify and select the desired elements.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1xdxta3.png =430x629)

3. Press **ESC** to finish the selection; the selected elements will be displayed as a list inside the extension. **You can view or remove any element from the list at any time**, by clicking on the “X” icon.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_17j8kvl.png =430x126)

4. Click on **Gerar** to generate the animation code
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1uc3a61.png =430x635)

5. Go to the **GreatPages** editor and click on the **gear icon** in the top right corner of the screen. Then click on **""Javascript/CSS""** and after that on **""add code ""**.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_mzom9s.png)

6. Paste the code generated by the extension and check the ""Operation"" option.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1k9wbs4.png)

7. Update the editor using the orange ""To update"" button.

### Efeito Flutuante

1. Click on Identify and select the desired elements.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_rao6em.png =430x381)

2. Press **ESC** to finish the selection; the selected elements will be displayed as a list inside the extension. **You can view or remove any element from the list at any time**, by clicking on the “X” icon.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_ndbh50.png =430x126)

3. Click on **Gerar** to generate the animation code.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_mhv893.png =430x371)

4. Go to the **GreatPages** editor and click on the **gear icon** in the top right corner of the screen. Then click on **""Javascript/CSS""** and after that on **""add code""**.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_12bp9wa.png)

5. Paste the code generated by the extension and check the ""Operation"" option.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1kwf307.png)

6. Update the editor using the orange ""To update"" button.

---

# WhatsApp Flutuante
Create a fixed WhatsApp contact button for your page.

1. Fill in the **country code** (e.g.: 55 for Brazil) and the full number with the area code, without dashes or spaces. Example: `5511999998888`.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_x3gec4.png =430x153)

2. Click on **Gerar** and Copy **code**to create the button.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1x9la3f.png =430x331)

3. Go to the **GreatPages** editor and click on the **gear icon** in the top right corner of the screen. Then click on **""Javascript/CSS""** and after that on **""**To add **code""**.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_ed9xcy.png =754xauto)

4. Paste the code generated by the extension and check the ""Operation"" option.
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1wijxro.png =300xauto)

5. Update the editor using the orange ""Atualizar"" button.

||| In preview mode, the button will not open the WhatsApp link for security reasons. Test it on the published page.

---

# Final tips

* If you notice any incorrect behavior, refresh the page and try again.
* The name of the current page is displayed in the extension footer.
* The form element uses the **same ID** across all of its components. Therefore, when you add any effect or code targeting the button, that change will be applied **to the entire form**, and not only to the button.

Still have questions? Contact our support team. We're always here to help! 😊