Incrustar tu espacio de trabajo

Puedes integrar ONLYOFFICE Apps o partes de él en tu propia aplicación web, permitiendo a los usuarios crear y enviar documentos directamente desde tu sitio web.

Para este propósito, utiliza el SDK de ONLYOFFICE Apps basado en JavaScript, que permite a los desarrolladores usar todas las funcionalidades de ONLYOFFICE Apps con api.js.

Para incrustar todo el espacio de trabajo, una sala específica o una carpeta en tu sitio web,

1. Abre la sección de Herramientas de Desarrollador haciendo clic en el enlace de Herramientas de Desarrollador que está disponible en el panel izquierdo de cualquier sección (Archivos, Salas).

   nota

   Por defecto, el acceso a la sección de Herramientas de Desarrollador está habilitado para todos los usuarios excepto los invitados, de modo que cualquier usuario puede acceder a esta página y crear sus propias integraciones.

2. En las Herramientas de Desarrollador, ve a la sección Embed SDK.

3. En la página de Embed SDK, ve a la sección Añada los dominios permitidos para este espacio de trabajo, introduce la dirección del servicio en el que quieres incrustar o conectar el espacio de trabajo y presiona el icono +. Indica solo el nombre de dominio, sin rutas de URL ni caracteres adicionales. Los dominios añadidos aparecen debajo del campo y cada uno se puede eliminar haciendo clic en el icono x.

   nota

   Si estás utilizando la versión del servidor, es necesario cambiar tu espacio de trabajo a HTTPS primero. Puedes seguir nuestras instrucciones en la sección de Instalación.

   

4. En la sección Selecciona un modo para incrustar tu espacio de trabajo, elige uno de los modos sugeridos: Apps, Sala pública, Editor, Visor, Selector de salas, Selector de archivos, Personalizado, Subidor.

   • Apps - incrusta todo el espacio de trabajo para permitir a los usuarios interactuar con todas las salas, archivos y configuraciones.
   • Sala pública - incrusta una sala pública para permitir a los usuarios ver, editar, comentar o revisar todos los documentos almacenados allí sin necesidad de registro.
   • Editor - incrusta un editor para permitir a los usuarios editar un archivo de la sala correspondiente.
   • Visor - incrusta un visor para permitir a los usuarios abrir un archivo para visualizar desde la sala correspondiente.
   • Selector de salas - incrusta un selector de salas para permitir a los usuarios acceder a cualquier sala de la lista de las disponibles. Puedes incrustar todos los tipos de salas o seleccionar las necesarias en el menú Configuración avanzada de visualización -> Visualización del tipo de sala. Selecciona la opción necesaria: Todos los tipos, Sala pública, Sala de colaboración, Sala de datos virtual, Sala personalizada.
   • Selector de archivos - incrusta un selector de archivos para permitir a los usuarios acceder a cualquier archivo de la lista de los disponibles.
   • Personalizado - configura manualmente los parámetros para incrustar tu espacio de trabajo.
   • Subidor - incrusta un subidor para que los usuarios puedan subir documentos a tu espacio de trabajo sin registrarse. Elige los tipos de archivo permitidos para la subida. Están disponibles los siguientes ajustes:

     • ID de la carpeta de destino - selecciona la carpeta del espacio de trabajo donde se guardarán los archivos subidos. Utiliza el selector de carpetas para buscar y elegir la ubicación de destino.

     • Modo de subida - selecciona qué podrán subir los usuarios:

       • Archivos - permitir la subida de archivos individuales.
       • Carpetas - permitir la subida de estructuras de carpetas completas.

     • Cantidad - define cuántos elementos se pueden subir a la vez:

       • Un solo archivo - limitar el subidor a un archivo por sesión.
       • Varios archivos - permitir la subida de varios archivos a la vez.

     • Límites de subida - establece el Tamaño máximo de archivo y la unidad (KB, MB o GB) para limitar el tamaño de cada archivo subido.

     • Tipos de archivo disponibles - marca una o más categorías para restringir los tipos de archivo que se pueden subir: Documentos, Hojas de cálculo, Presentaciones, Imágenes, Vídeo, Audio, Archivos comprimidos, PDF.

     • Texto del botón - personaliza la etiqueta del botón de subida (por defecto Subir).

     • Texto de ayuda - personaliza el texto de ayuda secundario que se muestra debajo del botón (por defecto o suelta el archivo aquí).

     • Personalización de la visualización - establece el Ancho, la Altura (en % o px) y el ID del marco que se usa para identificar el marco incrustado en tu página.

       

5. Haz clic en el botón Comenzar configuración.

6. Personaliza las opciones de visualización disponibles que varían dependiendo del modo seleccionado. Por ejemplo, las siguientes opciones están disponibles para el modo Personalizado: Ancho, Altura, ID del marco, Elementos de la interfaz (Menú izquierdo, Título, Configuración de columnas, Botón de acción, Búsqueda, Filtrar y ordenar y Encabezado (solo para dispositivos móviles)), Configuración de visualización de datos (selecciona la sección, sala o carpeta que quieres mostrar) y Configuración avanzada de visualización, como Término de búsqueda, Ordenar por parámetro, Orden de clasificación, el número de archivos / carpetas mostrados en una página, Página de visualización, Visualización de columnas en una fila de archivo.

7. Previsualiza el resultado en la sección de Vista previa.

8. Cambia a la pestaña Código para insertar y copia el código generado de la pestaña HTML, JavaScript o NPM. Para NPM, se proporcionan los comandos para instalar e importar el paquete, así como el objeto de configuración con los parámetros necesarios y el elemento HTML en el que insertar el marco del SDK.

9. Incrusta el código copiado en tu sitio web.

La página de Embed SDK también incluye una sección de Ejemplos de integración con integraciones listas para usar para plataformas populares como Zoom y WordPress. Haz clic en Ver todos los conectores para explorar la lista completa de integraciones disponibles.

Para más detalles sobre el Embed SDK, por favor consulta api.onlyoffice.com.