Intégrez ONLYOFFICE DocSpace dans une application à page unique

Au printemps 2023, nous avons lancé ONLYOFFICE DocSpace, une plateforme de collaboration de pointe conçue pour améliorer l’échange documentaire avec les clients, les partenaires et les tiers. Avec des salles personnalisables et des fonctions de sécurité avancées, cette solution innovante révolutionne la façon dont vous collaborez avec les documents. Dans cet article, nous allons montrer comment intégrer facilement DocSpace dans une application à page unique (SPA) en utilisant GitHub Pages comme exemple.

Pourquoi intégrer DocSpace

Que vous utilisiez la version cloud ou la version serveur, DocSpace vous offre un large éventail d’options de personnalisation, ce qui vous permet d’améliorer la fonctionnalité de vos applications web et de les adapter précisément à vos besoins :

• Collaboration sur le contenu en toute transparence avec des éditeurs et des visionneurs collaboratifs.
• Création et personnalisation de salles à des fins diverses.
• Intégration transparente de sections, de salles ou de dossiers DocSpace spécifiques dans votre application Web.
• Fonctions de sécurité robustes, notamment le chiffrement AES-256, l’autorisation JWT, le 2FA, etc.
• Amélioration de votre productivité grâce à l’intégration transparente d’OpenAI.

ONLYOFFICE DocSpace redéfinit les flux de documents, en combinant des fonctionnalités collaboratives complètes avec des solutions de stockage robustes. Il donne un coup de main aux développeurs qui cherchent à améliorer les fonctions de collaboration et de stockage de leurs produits, ce qui en fait un choix idéal pour les applications de CRM, de PMS, de messagerie, etc.

DocSpace offre la possibilité de fonctionner dans le nuage ou d’être déployé localement sur votre serveur, ce qui vous offre la flexibilité nécessaire pour un réglage et une personnalisation précis.

Dans nos prochains articles, nous approfondirons les possibilités d’intégration native disponibles avec la version serveur. Cependant, aujourd’hui, nous nous concentrons sur l’intégration sans effort de la version cloud dans une application à page unique (SPA). Ce processus est remarquablement simple et élimine le besoin d’une installation locale de ONLYOFFICE DocSpace.

Création d’un compte DocSpace

Créez un compte DocSpace et choisissez votre plan. La solution DocSpace offre à la fois un plan Startup gratuit et un abonnement Business.

Créer un compte DocSpace

Intégration de DocSpace

La fonctionnalité polyvalente de DocSpace vous permet d’intégrer soit l’ensemble de l’application, soit des salles et des dossiers spécifiques. L’intégration de l’instance entière de DocSpace est un processus très simple, réalisable en quelques clics :

• Sur votre écran d’accueil DocSpace, cliquez sur les trois points à côté de votre nom et accédez aux paramètres DocSpace :

• Dans l’onglet de droite, choisissez l’option Developer Tool :

• Allez sur le SDK JavaScript et faites défiler la page jusqu’à la section Créer un exemple d’intégration dans DocSpace :

Ici, vous pouvez personnaliser les options d’affichage, notamment la largeur, la hauteur, les éléments d’interface, les paramètres d’affichage des données et les paramètres d’affichage avancés.

• Passez à la section Code à insérer et copiez l’extrait de code généré :

• Insérez l’extrait de code généré dans le fichier index.html de votre site web.
• Retournez à la page de DocSpace Developer Tool et faites défiler jusqu’à la section Intégrer DocSpace en tant qu’iframe. Collez le lien vers votre site web et appuyez sur l’icône +. Le lien apparaîtra sous le champ de saisie :

• Allez sur votre site web :

Intégration d’une salle spécifique

Pour intégrer une salle spécifique, procédez comme suit :

• Retournez à Developer Tools dans les paramètres de DocSpace.
• Naviguez vers le SDK JavaScript et faites défiler vers le bas jusqu’à la section Créer un exemple d’intégration dans DocSpace. Ici, vous pouvez configurer la largeur et la hauteur de l’iframe, choisir les éléments d’interface à afficher et modifier les paramètres d’affichage avancés. Pour afficher une salle spécifique, allez dans les paramètres d‘affichage des données et faites votre sélection dans la liste des salles créées :

• Passez à l’onglet Code à insérer et copiez l’extrait de code généré :

• Insérez l’extrait de code généré dans le fichier index.html de votre site web :

Intégration de DocSpace dans les pages GitHub

• Connectez-vous à votre GitHub.
• Dans votre compte GitHub, créez un nouveau dépôt avec votre nom d’utilisateur suivi de .github.io.
• Allez dans votre dépôt GitHub, créez un nouveau fichier index.html, collez l’extrait de code du SDK Javascript DocSpace, puis validez les modifications.
• Déployez votre référentiel sous forme de pages GitHub.
• Retournez à la page de DocSpace Developer Tool et faites défiler l’écran jusqu’à la section DocSpace intégré en tant qu’iframe. Insérez le lien vers votre domaine GitHub où votre site web est hébergé, puis cliquez sur l’icône +. Veillez à ce que le lien respecte le format suivant : votreNomGitHub.github.io. Le lien s’affiche sous le champ de saisie.
• Allez sur votre site web.

Nous pensons que cet article a montré comment ONLYOFFICE DocSpace élève la collaboration à un nouveau niveau et s’intègre de manière transparente dans vos processus de travail. Grâce à ses capacités, vous pouvez améliorer la collaboration documentaire en toute simplicité.

Restez à l’écoute de nos prochains articles, dans lesquels nous explorerons des niveaux d’intégration plus profonds avec la version serveur. Nous pensons que ces informations vous permettront de tirer le meilleur parti de DocSpace pour vos besoins en matière de co-working. Nous vous souhaitons bonne chance dans vos démarches exploratoires !