> ## 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). # Cómo utilizar la EXTENSIÓN GREATASSISTANT de GreatPages La extensión fue creada para facilitar el trabajo dentro del editor de la plataforma, permitiendo aplicar efectos, capturar IDs y generar códigos automáticamente de forma práctica y segura. A continuación, puedes ver cómo **instalar y utilizar** todas las funciones disponibles. --- # Instalación de la extensión Para comenzar, es necesario instalar la extensión en tu navegador Google Chrome. 1. Accede al enlace oficial de instalación de la **Extensión** - https://chromewebstore.google.com/detail/greatassistant/oemgomchjnagihocbmefjehngaekoigf?hl=pt-br 2. Haz clic en **Agregar a Chrome**. 3. Confirma haciendo clic en **Agregar extensión**. 4. Después de la instalación, el ícono de la extensión aparecerá en la esquina superior derecha del navegador (cerca de la barra de direcciones). 5. Haz clic en el ícono de **extensiones (pieza de rompecabezas)** y fija la **extensión** para acceder rápidamente. || Consejo: Si el botón “Agregar extensión” no aparece, verifica que estés usando el navegador Google Chrome actualizado. # Acceso y visión general 1. Accede a la **página publicada** que deseas editar en GreatPages. 2. Haz clic en el ícono de la extensión. 3. La interfaz mostrará las secciones disponibles: * Identificação de ID * Delays * Degradês * Efeitos * WhatsApp Flutuante 4. Durante la selección de elementos/bloques se mostrará una marca en la esquina superior derecha: verde significa que la selección está activa, roja/transparente significa que está desactivada. Cada área tiene una función específica, explicada en las próximas secciones. --- # Identificação de ID Esta función identifica el **ID de bloques o elementos** de la página, utilizado en scripts y personalizaciones. 1. Haz clic en el botón **Identificar**. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_5iw013.png =430x507) 2. Selecciona el **bloque o elemento** deseado en la página. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1x007vb.png =430x328) 3. Presiona **ESC para finalizar la selección; el o los ID aparecerán automáticamente en la lista.** ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_15bnnh3.png =430x614) 5. Haz clic sobre el ID para **copiarlo** o haz clic en la **X** para eliminarlo. --- # Delays (Visualización temporizada) La función **Delays** permite mostrar bloques o elementos **después de un tiempo determinado** en segundos. ### Bloques 1. Haz clic en **Identificar Blocos** y selecciona los bloques deseados en la página. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1dmimbq.png =430x591) 2. Presiona **ESC** para finalizar la selección; los bloques seleccionados se mostrarán en forma de lista dentro de la extensión. **Puedes ver o eliminar cualquier bloque de la lista** en cualquier momento, haciendo clic en el ícono de “X”. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1iknljo.png =430x212) 3. Define el **tiempo de visualización** (ej.: 5 segundos). ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1livkty.png =430x146) 4. Haz clic en **Gerar** para crear el código. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_12jcpkh.png =430x500) 5. Accede al editor de **GreatPages** y haz clic en el **ícono de engranaje** en la esquina superior derecha de la pantalla. Enseguida, haz clic en **"Javascript/CSS"** y después en **"Adicionar código"**. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1mdv2of.png =430x298) 6. Pega el código generado por la extensión y marca la opción "**Funcionamento**". ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_sda97c.png =420x541) 7. **Importante:** haz clic en los bloques que recibirán el delay, haz clic en **editar** y **ocúltalos en desktop y mobile**. Esta acción es necesaria para que el código muestre esos bloques automáticamente después del tiempo configurado. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_mpkf7e.png =430x1314) 8. Haz clic en el botón **“Atualizar”** (naranja) para guardar los cambios. ### Elementos 1. Haz clic en **Identificar** y selecciona los ítems deseados. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_ushzku.png =430x502) 2. Presiona **ESC** para finalizar la selección; los elementos seleccionados se mostrarán en forma de lista dentro de la extensión. **Puedes ver o eliminar cualquier elemento de la lista en cualquier momento**, haciendo clic en el ícono de “X”. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_qpd9on.png =430x215) 3. Define el **tiempo de visualización** (ej.: 5 segundos). ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_gykpuc.png =430xauto) 4. Haz clic en **Gerar** para crear el código. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1i1jy7c.png =430x496) 5. Accede al editor de **GreatPages** y haz clic en el **ícono de engranaje** en la esquina superior derecha de la pantalla. Enseguida, haz clic en **"Javascript/CSS"** y después en **"Adicionar código"**. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_konfu7.png =430x298) 6. Pega el código generado por la extensión y marca la opción "**Funcionamento**". ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_n93dst.png =430x964) ||| A diferencia del delay de bloques, no es necesario ocultar los elementos en el editor. # Degradês Crea efectos de degradado en **bloques y elementos**, eligiendo colores y dirección. ### Bloques 1. Elige el **tipo de degradado** (ej.: Linear 45°). ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/branco_1oztbmm.png =920x223) 2. Selecciona los **dos colores** del degradado. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1d273vh.png =430x269) 3. Haz clic en **Identificar** y selecciona los bloques deseados. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_myobzk.png =430x679) 4. Presiona **ESC** para finalizar la selección; los bloques seleccionados se mostrarán en forma de lista dentro de la extensión. **Puedes ver o eliminar cualquier bloque de la lista en cualquier momento**, haciendo clic en el ícono de “X”. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_16f38f0.png =430x132) 5. Haz clic en **Gerar** para obtener el código. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_i1ywrt.png =430x672) 6. Accede al editor de **GreatPages** y haz clic en el **ícono de engranaje** en la esquina superior derecha de la pantalla. Enseguida, haz clic en **"Javascript/CSS"** y después en **"Adicionar código"**. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_wp4yex.png =430x298) 7. Pega el código generado por la extensión y marca la opción "**Funcionamento**". ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_guc2ew.png =430x772) 8. Actualiza el editor con el botón naranja "Atualizar". ### Elementos 1. Elige el **tipo de degradado** (ej.: Linear 45°). ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1iu4szr.png =920x223) 2. Haz clic en **Identificar** y selecciona los elementos de la página. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_rvv13s.png =430x674) 3. Presiona **ESC** para finalizar la selección; los elementos seleccionados se mostrarán en forma de lista dentro de la extensión. **Puedes ver o eliminar cualquier elemento de la lista en cualquier momento**, haciendo clic en el ícono de “X”. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_z9ju0g.png =420x120) 4. Haz clic en **Gerar** para crear el código listo. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_8vbf74.png =430x656) 5. Accede al editor de **GreatPages** y haz clic en el **ícono de engranaje** en la esquina superior derecha de la pantalla. Enseguida, haz clic en **"Javascript/CSS"** y después en **"Adicionar código"**. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_3xcbm0.png =430x298) 6. Pega el código generado por la extensión y marca la opción "**Funcionamento**". ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_gk749.png =420x747) 7. Actualiza el editor con el botón naranja "Atualizar". ||| El degradado no funcionará para textos, quedará como fondo. --- # Efeitos Agrega efectos visuales simples y atractivos a los elementos de la página. ### Efeito Pulse 1. En **Efeito Pulse**, elige el **color del efecto**. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_18usa2x.png =430x521) 2. Haz clic en **Identificar** y selecciona los elementos deseados. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1xdxta3.png =430x629) 3. Presiona **ESC** para finalizar la selección; los elementos seleccionados se mostrarán en forma de lista dentro de la extensión. **Puedes ver o eliminar cualquier elemento de la lista en cualquier momento**, haciendo clic en el ícono de “X”. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_17j8kvl.png =430x126) 4. Haz clic en **Gerar** para generar el código de animación ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1uc3a61.png =430x635) 5. Accede al editor de **GreatPages** y haz clic en el **ícono de engranaje** en la esquina superior derecha de la pantalla. Enseguida, haz clic en **"Javascript/CSS"** y después en **"Adicionar código"**. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_6cfeyp.png =430x298) 6. Pega el código generado por la extensión y marca la opción "**Funcionamento**". ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1mdttq2.png =430x770) 7. Actualiza el editor con el botón naranja "Atualizar". ### Efeito Flutuante 1. Haz clic en **Identificar** y selecciona los elementos deseados. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_rao6em.png =430x381) 2. Presiona **ESC** para finalizar la selección; los elementos seleccionados se mostrarán en forma de lista dentro de la extensión. **Puedes ver o eliminar cualquier elemento de la lista en cualquier momento**, haciendo clic en el ícono de “X”. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_ndbh50.png =430x126) 3. Haz clic en **Gerar** para generar el código de animación. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_mhv893.png =430x371) 4. Accede al editor de **GreatPages** y haz clic en el **ícono de engranaje** en la esquina superior derecha de la pantalla. Enseguida, haz clic en **"Javascript/CSS"** y después en **"Adicionar código"**. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_mzdc8a.png =430x298) 5. Pega el código generado por la extensión y marca la opción "**Funcionamento**". ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1gmerdp.png =430x772) 6. Actualiza el editor con el botón naranja "Atualizar". --- # WhatsApp Flutuante Crea un botón fijo de contacto por WhatsApp para tu página. 1. Completa el **código de país (DDI)** (ej.: 55 para Brasil) y el número completo con código de área, sin guiones ni espacios. Ejemplo: `5511999998888`. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_x3gec4.png =430x153) 2. Haz clic en **Gerar** y **Copiar Código** para crear el botón. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1x9la3f.png =430x331) 3. Accede al editor de **GreatPages** y haz clic en el **ícono de engranaje** en la esquina superior derecha de la pantalla. Enseguida, haz clic en **"Javascript/CSS"** y después en **"Adicionar código"**. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_mzdc8a.png =430x298) 4. Pega el código generado por la extensión y marca la opción "**Funcionamento**". ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1nvidge.png =430x766) 5. Actualiza el editor con el botón naranja "Atualizar". ||| En el modo de vista previa, el botón no abrirá el enlace de WhatsApp por motivos de seguridad. Pruébalo en el modo publicado. --- # Consejos finales * Si notas un comportamiento incorrecto, actualiza e intenta nuevamente. * El nombre de la página actual se muestra en el pie de la extensión. * El elemento de formulario utiliza el **mismo ID** en todos sus componentes. Por lo tanto, al agregar cualquier efecto o código dirigido al botón, ese ajuste se aplicará **a todo el formulario**, y no solo al botón. ¿Te quedó alguna duda? Contacta a nuestro soporte. ¡Siempre estamos a disposición para ayudarte! 😊