Extiende la IU de Google Workspace

En esta página, se describen las opciones para extender la interfaz de usuario (IU) de Google Workspace. Puedes extender la IU de Google Workspace por muchos motivos, incluidos los siguientes:

  • Integra tu app o servicio en Google Workspace para que los usuarios puedan usar la app directamente desde una o más apps de Google Workspace. Por ejemplo, crea un complemento de Google Workspace que genere chips inteligentes y vistas previas de vínculos para tu servicio dentro de Documentos de Google.
  • Ayudar a los usuarios de Google Workspace a ser más productivos o mejorar su flujo de trabajo Por ejemplo, crea una app de Google Chat que permita a los usuarios informar las hojas de horas semanales directamente desde Google Chat.
  • Agregar funciones que no están disponibles de forma nativa en Google Workspace Por ejemplo, agrega un menú personalizado en Documentos, Hojas de cálculo o Presentaciones de Google.

Puedes publicar la mayoría de las opciones para extender la IU de Google Workspace en Google Workspace Marketplace, una tienda en línea en la que los usuarios pueden encontrar e instalar apps de terceros que se integran con Google Workspace.

Descripción general de las opciones para extender la IU de Google Workspace

En la siguiente tabla, se enumeran las opciones para extender la IU de Google Workspace y se comparan según las siguientes características:

  • Apps extended: Muestra las apps de Google Workspace que puedes extender con la opción determinada.
  • Opciones de codificación: Muestra las formas en que puedes compilar, incluidas las siguientes:
    • AppSheet: Es una plataforma de desarrollo sin código.
    • Apps Script: Es una plataforma de desarrollo con poco código basada en JavaScript y alojada en la nube.
    • Full dev: Tu propia pila tecnológica que admite tu lenguaje de programación preferido.
  • Frameworks de IU: Indican los tipos de frameworks de IU que puedes usar para compilar cada opción, incluidos los siguientes:
    • Basada en tarjetas: Las interfaces de tarjetas son widgets y tarjetas predefinidos creados con el servicio de tarjetas a través de Apps Script o devolviendo JSON con el formato adecuado para renderizar tarjetas con tu pila tecnológica preferida (desarrollo completo). Las interfaces basadas en tarjetas no requieren conocimientos de HTML ni CSS, y funcionan bien en clientes de escritorio y dispositivos móviles.
    • HTML: Apps Script ofrece un servicio HTML para desarrollar páginas web que pueden interactuar con funciones de Apps Script del servidor. Las interfaces desarrolladas con el servicio HTML son altamente personalizables, pero requieren más trabajo manual para crear una excelente experiencia del usuario.
    • iframe: Los iframes incorporan contenido externo en Google Workspace y ofrecen la mayor capacidad de personalización para las interfaces de usuario.

Después de la tabla, se incluyen las descripciones de cada opción.

Qué puedes crear Vista previa Se extendieron las apps Opciones de codificación IU basada en tarjetas IU de HTML IU de iframe
Complementos de Google Workspace Ejemplo de complemento de Google Workspace que muestra una integración de barra lateral.
Logotipo de Gmail que muestra la disponibilidad de la integración de correo electrónico. Gmail
Logotipo de Google Drive para la compatibilidad con el almacenamiento de archivos. Drive
Logotipo del Calendario de Google para la extensión de la app de programación. Calendario
Logotipo de Google Chat para la integración de la app de mensajería. Chat
Logotipo de Documentos de Google para la integración de edición de documentos. Documentos
Logotipo de Google Meet para la integración de videoconferencias. Meet
Logotipo de Hojas de cálculo de Google para la extensión de la app de hojas de cálculo. Hojas
Logotipo de Presentaciones de Google para la extensión de la app de presentaciones. Diapositivas
Logotipo de Google Apps Script para opciones de programación. Apps Script
Logotipo de Google Developers para opciones de pila completa. Full dev
Vistas previas de vínculos y chips inteligentes | Complementos de Google Workspace Ejemplo de vistas previas de vínculos de complementos de Google Workspace que muestran chips inteligentes.
Ícono de Documentos de Google para la vista previa del chip inteligente. Documentos
Ícono de Hojas de cálculo de Google para la vista previa del chip inteligente. Hojas
Ícono de Presentaciones de Google para la vista previa del chip inteligente. Diapositivas
Logotipo de AppSheet para opciones de desarrollo sin código. AppSheet
Logotipo de Google Apps Script para programación con poco código. Apps Script
Logotipo de Google Developers para programación profesional. Full dev
Borradores de correos electrónicos | Complementos de Google Workspace Ejemplo de complemento de Google Workspace para borradores de correos electrónicos en Gmail.
Logotipo de Gmail que representa las extensiones de borradores de correos electrónicos. Gmail
Ícono de Google Apps Script para extensiones de correo electrónico. Apps Script
Ícono de Google Developers para desarrolladores de tiempo completo. Full dev
Panel lateral y escenario principal de la reunión | Complementos de Google Workspace La interfaz de los complementos de Google Meet interactúa con la escena principal y el panel lateral.
Logotipo de Google Meet para la integración de reuniones. Meet
Logotipo de Google Developers para reuniones de programación. Full dev
Apps de Google Chat | Complementos de Google Workspace Ejemplo de app de Chat que muestra mensajería interactiva en Chat.
Logotipo de Google Chat para las extensiones de chat. Chat
Logotipo de AppSheet para las opciones de la app de chat. AppSheet
Logotipo de Google Apps Script para extensiones de chat. Apps Script
Logotipo de Google Developers para el chat de pila completa. Full dev
Conferencias de Calendario | Complementos de Google Workspace Ejemplo de complemento de Google Workspace para la interfaz de conferencias de Calendar.
Logotipo del Calendario de Google para las funciones de conferencia. Calendario
Logotipo de Google Apps Script para extensiones de calendario. Apps Script

Usa la IU existente

Complementos del Editor Ejemplo de complemento del editor que muestra la extensión de Documentos de Google.
Logotipo de Documentos de Google para editores de documentos. Documentos
Logotipo de Hojas de cálculo de Google para editores de hojas de cálculo. Hojas
Logotipo de Presentaciones de Google para editores de presentaciones. Diapositivas
Logotipo de Formularios de Google para los editores de formularios. Formularios
Logotipo de Google Apps Script para la edición de hojas de cálculo. Apps Script
Funciones personalizadas | Complementos del editor Ejemplo de función personalizada que muestra el uso de fórmulas de hojas de cálculo.
Logotipo de Hojas de cálculo de Google para funciones personalizadas. Hojas
Logotipo de Google Apps Script para escribir secuencias de comandos. Apps Script

Usa la IU existente

Macros | Complementos del editor Ejemplo de macro que muestra los pasos grabados de automatización de la hoja de cálculo.
Logotipo de Hojas de cálculo de Google para crear macros. Hojas
Logotipo de Google Apps Script para automatizar tareas. Apps Script

Usa la IU existente

Menús, diálogos y barras laterales personalizados | Complementos del editor Ejemplo de menú y barra lateral que muestra la personalización de la IU del editor.
Logotipo de Documentos de Google para las barras laterales de documentos. Documentos
Logotipo de Hojas de cálculo de Google para los diálogos de hojas de cálculo. Hojas
Logotipo de Presentaciones de Google para las barras laterales de las presentaciones. Diapositivas
Logotipo de Formularios de Google para los diálogos de formularios. Formularios
Logotipo de Google Apps Script para barras laterales. Apps Script
Apps de Google Drive Ejemplo de la app de Drive que muestra la integración del menú de archivos.
Logotipo de Google Drive para el acceso a archivos. Drive
Logotipo de Google Developers para la asistencia de pila completa. Full dev

Usa la IU existente

Complementos de Google Classroom Ejemplo de complementos de Google Classroom que muestra la interfaz de archivos adjuntos de tareas.
Logotipo de Google Classroom para herramientas de educadores. Classroom
Logotipo de Google Developers para la integración en Classroom. Full dev

Tipos de integraciones de apps

En la siguiente sección, se explican los tipos de integraciones de apps que puedes crear para extender la IU de Google Workspace.

Para compartir tu función con otros usuarios de Google Workspace, puedes publicar una ficha en Google Workspace Marketplace. Para saber qué tipos de integraciones de apps se pueden mostrar juntos, consulta Lista de integraciones de apps en la documentación de Marketplace.

Complementos de Google Workspace

Ejemplo de complemento de Google Workspace que muestra la integración de la app en la barra lateral.

Ejemplo de complemento de Google Workspace que muestra la integración de la app en la barra lateral.

Los complementos de Google Workspace son aplicaciones que se integran con las aplicaciones de Google Workspace. Un complemento puede extender varias apps de Google Workspace. Por lo general, la app se abre en una barra lateral dentro de la app de Google Workspace que extiende.

Además de crear barras laterales, puedes crear las siguientes funciones para un complemento:

Consulta la documentación de los complementos de Google Workspace

Logotipo de Google Workspace Marketplace para la publicación. Publicable



Opciones de codificación:

Logotipo de Google Apps Script para la codificación automatizada. Apps Script
Logotipo de Google Developers para el desarrollo de software. Full dev

Extiende las siguientes apps:

Logotipo de Gmail para las integraciones de la app de correo electrónico. Gmail
Ícono de Google Drive para las integraciones de archivos. Drive
Ícono de Calendario de Google para la app de programación. Calendario
Logotipo de Google Chat para herramientas de conversación. Chat

Ícono de Documentos de Google para editar documentos. Documentos
Logotipo de Google Meet para herramientas de video. Meet
Logotipo de Hojas de cálculo de Google que representa las apps de hojas de cálculo. Hojas
Ícono de Presentaciones de Google para apps de presentaciones. Diapositivas

Frameworks de IU disponibles:

Ícono de Card Framework para el diseño de la IU. Marco de tarjetas



Ejemplo de vista previa del vínculo que muestra un chip inteligente descriptivo.

Ejemplo de vista previa del vínculo que muestra un chip inteligente descriptivo.

Los complementos de Google Workspace que extienden Documentos pueden crear vistas previas de vínculos personalizadas desde un servicio de terceros. Al igual que los chips inteligentes que genera Documentos para las menciones de una persona, un archivo, un evento de calendario o alguna otra entidad dentro de una aplicación de Google Workspace, un complemento puede generar un chip inteligente para un vínculo de terceros y mostrar una tarjeta de vista previa cuando alguien coloque el cursor sobre el chip.

Puedes agregar vistas previas de vínculos a los complementos existentes de Google Workspace o crear un complemento independiente específicamente para las vistas previas de vínculos.

Consulta la documentación sobre las vistas previas de vínculos y los chips inteligentes

Logotipo de Google Workspace Marketplace para la publicación. Publicable



Opciones de codificación:

Logotipo de AppSheet para el desarrollo sin código. AppSheet
Ícono de Google Apps Script para secuencias de comandos de automatización. Apps Script
Ícono de Google Developers para desarrolladores de pila completa. Full dev

Extiende las siguientes apps:

Ícono de Documentos de Google para las herramientas de extensión de documentos. Documentos
Ícono de Hojas de cálculo de Google para la extensión de la herramienta de hojas de cálculo. Hojas
Ícono de Presentaciones de Google para la extensión de la herramienta de presentación. Diapositivas

Frameworks de IU disponibles:

Ícono del framework de tarjetas para los componentes de la IU. Marco de tarjetas



Borradores de correos electrónicos

Ejemplo de borrador de correo electrónico que muestra una interfaz de redacción personalizada.

Ejemplo de borrador de correo electrónico que muestra una interfaz de redacción personalizada.

Los complementos de Google Workspace que extienden Gmail pueden proporcionar una interfaz personalizada cuando el usuario redacta mensajes nuevos o responde mensajes existentes. Para usar esta interfaz, los usuarios abren el complemento desde el borrador de correo electrónico, ya sea en la parte inferior del borrador o en el menú Más opciones.

Ver la documentación de borradores de correos electrónicos

Logotipo de Google Workspace Marketplace para la publicación. Publicable



Opciones de codificación:

Ícono de Google Apps Script para herramientas de programación. Apps Script
Logotipo de Google Developers para el desarrollo profesional. Full dev

Extiende las siguientes apps:

Logotipo de Gmail que representa la integración del correo electrónico. Gmail

Frameworks de IU disponibles:

Logotipo del framework de tarjetas para el sistema de diseño. Marco de tarjetas



Escena principal y panel lateral de la reunión

Ejemplo de complementos de Meet que muestra la colaboración en la escena principal.

Ejemplo de complementos de Meet que muestra la colaboración en la escena principal.

Los complementos de Google Workspace que extienden Meet te permiten incorporar tu app en la interfaz de la escena principal o el panel lateral de una reunión, donde los usuarios pueden descubrir, compartir y colaborar en tu app sin salir de Meet.

A diferencia de otros complementos de Google Workspace, los complementos de Meet no usan la IU del framework de tarjetas. En su lugar, debes incorporar tu app con un iframe.

Ver la documentación del SDK de complementos de Meet

Logotipo de Google Workspace Marketplace para su publicación. Publicable



Opciones de codificación:

Logotipo de Google Developers para herramientas de pila completa. Full dev

Extiende las siguientes apps:

Logotipo de Google Meet para videoconferencias. Meet

Frameworks de IU disponibles:

Ícono de iframe para la aplicación web incorporada. iframe



Apps de Google Chat

Ejemplo de app de chat que muestra la interacción de mensajes.

Ejemplo de app de chat que muestra la interacción de mensajes.

Las apps de Chat incorporan recursos y servicios a Chat. Puedes diseñar apps de Chat para interactuar con los usuarios de muchas maneras, incluidas las siguientes:

  • Responder a comandos con un mensaje de texto o un mensaje de tarjeta
  • Abrir un diálogo para ayudar a los usuarios a completar procesos de varios pasos, como completar datos de formularios
  • Vínculos de vista previa adjuntando tarjetas con información útil que permiten a los usuarios realizar acciones directamente desde la conversación

Consulta la documentación de las apps de Chat

Ícono de Google Workspace Marketplace para la publicación de la app. Publicable



Opciones de codificación:

Logotipo de AppSheet para crear apps sin código. AppSheet
Ícono de Google Apps Script para la codificación de tareas automatizadas. Apps Script
Logotipo de Google Developers para la ingeniería de software profesional. Full dev

Extiende las siguientes apps:

Logotipo de Google Chat para las extensiones de conversación. Chat

Frameworks de IU disponibles:

Ícono de marco de tarjeta para diseñar interfaces de usuario. Marco de tarjetas



Conferencias en el Calendario

Ejemplo de conferencia de calendario que muestra la integración con eventos de reuniones.

Ejemplo de conferencia de calendario que muestra la integración con eventos de reuniones.

Si eres proveedor de servicios de conferencias web, puedes crear un complemento de Google Workspace que extienda Calendario de Google con tu solución de conferencias. El complemento agrega una opción de conferencia para los eventos de Calendario, lo que permite a los usuarios crear conferencias y unirse a ellas directamente desde Calendario.

Ver la documentación de las conferencias de Calendar

Logotipo de Google Workspace Marketplace para apps publicadas. Publicable



Opciones de codificación:

Ícono de Google Apps Script para los accesos directos de integración de conferencias. Apps Script

Extiende las siguientes apps:

Ícono del Calendario de Google para la configuración de sincronización de eventos. Calendario

Frameworks de IU disponibles:

Usa la IU existente.


Complementos del editor

Ejemplo de complemento del editor que muestra las funciones de extensión de Documentos de Google.

Ejemplo de complemento del editor que muestra las funciones de extensión de Documentos de Google.

Los complementos del editor son apps que extienden Documentos, Hojas de cálculo, Presentaciones o Formularios. Los complementos del editor solo pueden extender una app por complemento, pero puedes publicar varios complementos del editor en la misma ficha de Marketplace. Los usuarios abren los complementos del Editor desde el menú Extensiones de la app que extienden.

Puedes compilar las siguientes funciones para un complemento del Editor:

Ver la documentación de los complementos del Editor

Ícono de Google Workspace Marketplace para la publicación de software. Publicable



Opciones de codificación:

Ícono de Google Apps Script para el desarrollo de extensiones del editor. Apps Script

Extiende las siguientes apps:

Ícono de Documentos de Google para extensiones de edición de documentos. Documentos
Ícono de Hojas de cálculo de Google para las funciones de automatización de hojas de cálculo. Hojas
Ícono de Presentaciones de Google para herramientas de creación de presentaciones. Diapositivas
Ícono de Formularios de Google para herramientas de encuestas y formularios. Formularios

Frameworks de IU disponibles:

Ícono de HTML que representa el desarrollo de la interfaz de usuario basada en la Web. HTML
Ícono de iframe para incorporar contenido web externo. iframe



Funciones personalizadas

Ejemplo de función personalizada que muestra el uso de fórmulas de Hojas de cálculo de Google.

Ejemplo de función personalizada que muestra el uso de fórmulas de Hojas de cálculo de Google.

Las funciones personalizadas te permiten agregar más funciones en Hojas de cálculo. Los usuarios pueden encontrarlas y usarlas como cualquiera de las cientos de funciones integradas disponibles en Hojas de cálculo. Puedes publicar una función personalizada como complemento del Editor.

Ver la documentación de las funciones personalizadas

Logotipo de Google Workspace Marketplace para las opciones de publicación. Publicable



Opciones de codificación:

Apps Script

Extiende las siguientes apps:

Ícono de Hojas de cálculo de Google para automatizar tareas de hojas de cálculo. Hojas

Frameworks de IU disponibles:

Usa la IU existente.


Macros

Ejemplo de macro que muestra los pasos grabados de automatización de la hoja de cálculo.

Ejemplo de macro que muestra los pasos grabados de automatización de la hoja de cálculo.

Las macros son grabaciones en Hojas de cálculo que duplican una serie específica de interacciones de la IU que defines. Puedes vincular una macro a una combinación de teclas o ejecutarla desde el menú Extensiones > Macros.

Cuando grabas una macro, Hojas de cálculo crea automáticamente una función de Apps Script que replica las interacciones de la IU. Puedes editar macros directamente en el editor de Apps Script. Puedes escribir macros desde cero en Apps Script o tomar funciones que ya escribiste y convertirlas en macros. Una definición de macro se puede incluir en un complemento del Editor, pero no se puede publicar.

Consulta la documentación de las macros

Opciones de codificación:

Logotipo de Google Apps Script para la función de grabación de macros. Apps Script

Extiende las siguientes apps:

Hojas

Frameworks de IU disponibles:

Usa la IU existente.


Menús, diálogos y barras laterales personalizados

Ejemplo de menú personalizado que muestra las opciones de personalización de la barra de herramientas del editor.

Ejemplo de menú personalizado que muestra las opciones de personalización de la barra de herramientas del editor.

Puedes agregar menús, mensajes, alertas y diálogos y barras laterales basados en HTML personalizados a los archivos de Documentos, Hojas de cálculo, Presentaciones y Formularios como parte de un complemento del Editor. Los menús personalizados aparecen junto a los menús predeterminados de la app que extienden. Por lo general, los diálogos, las barras laterales, los mensajes y las alertas se activan por acciones del usuario, como clics en elementos de menú, o por activadores, como los activadores basados en eventos.

Ver la documentación de menús, diálogos y barras laterales personalizados

Opciones de codificación:

Ícono de Google Apps Script para desarrollar menús personalizados. Apps Script

Extiende las siguientes apps:

Logotipo de Documentos de Google para la integración de extensiones de documentos. Documentos
Ícono de Hojas de cálculo de Google para las extensiones de la barra lateral de la hoja de cálculo. Hojas
Logotipo de Presentaciones de Google para las extensiones de la barra lateral de presentaciones. Diapositivas
Logotipo de Formularios de Google para las extensiones de diálogo de formularios. Formularios

Frameworks de IU disponibles:

Ícono HTML para compilar interfaces de usuario personalizadas. HTML
Ícono de iframe para incorporar herramientas web de terceros. iframe



Apps de Google Drive

Ejemplo de la app de Drive que muestra las opciones para abrir archivos.

Ejemplo de la app de Drive que muestra las opciones para abrir archivos.

Si tu app admite archivos de Drive, puedes integrarla con la interfaz de usuario de Drive para presentarla como una opción para crear o abrir archivos. Tu app puede aparecer en el menú Nuevo > Más y en el menú Abrir con cuando un usuario haga clic con el botón derecho en un archivo de Drive. Cuando un usuario selecciona tu app en cualquiera de los menús, esta se abre en una ventana nueva.

Ver la documentación de las apps de Drive

Ícono de Google Workspace Marketplace para el descubrimiento de apps. Publicable



Opciones de codificación:

Logotipo de Google Developers para la creación de apps profesionales. Full dev

Extiende las siguientes apps:

Ícono de Google Drive para la integración del almacenamiento de archivos. Drive

Frameworks de IU disponibles:

Usa la IU existente.


Complementos de Google Classroom

Ejemplo de complementos de Classroom que muestra archivos adjuntos de tareas.

Ejemplo de complementos de Classroom que muestra archivos adjuntos de tareas.

Los complementos de Google Classroom permiten que los educadores creen archivos adjuntos en el trabajo del curso, los anuncios o los materiales del curso. Estos archivos adjuntos abren contenido de terceros en iframes en Classroom. Los elementos iframe abren URLs separadas según el tipo de usuario y el contexto de Classroom.

Ver la documentación de los complementos de Classroom

Logotipo de Google Workspace Marketplace para publicar integraciones. Publicable



Opciones de codificación:

Ícono de Google Developers para la integración de herramientas de clase. Full dev

Extiende las siguientes apps:

Logotipo de Google Classroom para herramientas de flujo de trabajo de educadores. Classroom

Frameworks de IU disponibles:

Ícono de Iframe para contenido web educativo incorporado. iframe