Aller au contenu principal

Installation Javascript

Logora peut être installé sur n'importe quel site en insérant le code natif JavaScript. Cette documentation est à destination des développeurs. Logora propose également une documentation personnalisée pour l'installation Wordpress.

L'installation en Javascript se fait en deux temps :

  1. Insérer l'espace de débat
  2. Insérer la synthèse du débat sur vos pages

Avant de commencer

  • Si l'équipe Logora ne vous a pas créé d'espace d'administration, créez votre espace d'administration Logora : Inscription
  • Munissez-vous de votre nom d'application disponible sur votre espace d'administration dans l'onglet Configuration > Général.
  • Autorisez les domaines sur lesquels vous désirez installer Logora. Pour cela, rendez-vous sur votre espace d'administration dans l'onglet Configuration > Général > Sécurité > Domaines autorisés. Par exemple, si le code inséré sur la page à l'URL https://exemple.com/article/exemple-article, ajoutez le domaine https://exemple.com. Exemple : http://localhost:3000 , http://sous-domaine.exemple.com. Important : l'ajout des domaines sur l'espace d'administration fonctionne comme un ajout de tag, n'oubliez pas d'appuyer sur "Entrer" lors de l'insertion de vos URL.

1. Installer l'espace de débat

L'espace de débat est la plateforme principale où vos utilisateurs pourront participer aux débats. L'espace de débat est inséré sur une page dédiée sur votre site.

Prenons l'exemple d'un site web disponible à l'adresse https://votresite.com. L'éditeur du site web souhaite accéder à l'espace de débat via l'adresse https://votresite.com/espace-debat. Voici les étapes à suivre pour insérer l'espace de débat :

1.1. Ajouter une page pour insérer l'espace de débat

Créez une page dédiée où sera inséré l'espace de débat. Cette page est disponible à l'adresse https://votresite.com/espace-debat. Le préfixe 'espace-debat' est le préfixe par défaut. Il est modifiable dans l'espace d'administration.

1.2. Insérer le code JavaScript et vos variables de configuration

Insérez les scripts nécessaires à l'espace de débat ainsi qu'un conteneur logora_app.

Le conteneur logora_app est l'endroit où l'espace de débat est affiché.

Code standard à copier/coller et compléter : 

<!-- Insérer les scripts suivants dans la balise <head>, le plus haut possible dans la page -->
<script>
    // Variables de configuration, le nom d'application est présent dans votre espace d'administration
    var logora_config = {
        shortname: "NOM_APPLICATION"
    };
</script>
<script src="https://api.logora.fr/debat.js"></script>
<!-- Insérer cette balise là où l'espace de débat doit être affiché -->
<div id="logora_app"></div>

1.3. Réécriture des URLs pour les routes de l'espace de débat

Utilisez la réécriture d'URL sur votre plateforme ou CMS pour que les chemins commençant par 'espace-debat/' (ou le préfixe que vous avez choisi) pointent vers la page où est inséré l'espace de débat.

Accédez à la page https://votresite.com/espace-debat/debats. Vous êtes sur la page d'accueil de l'espace de débat !

Pour modifier le préfixe et les chemins d'URLs des pages de l'espace de débat, rendez-vous sur la configuration des chemins d'URL.

2. Installer la synthèse du débat

Si avez des contraintes de performance élevé et que vous souhaitez indexer les pages de débat sur les moteurs de recherche, il est nécessaire d'insérer la synthèse côté serveur. Dans ce cas rendez-vous sur la page d'installation côté serveur.

Insérez le code Javascript de la synthèse à l'endroit où vous souhaitez voir apparaître la synthèse du débat, en pied d'article. Ceci est un exemple de code Javascript qui charge et affiche la synthèse du débat en cours lié à votre article. Il doit être inséré sur toutes vos pages d'articles. Ce code n'affichera rien tant que vous n'avez pas associé de débat à la page.

Si vous souhaitez utiliser le widget, utilisez l'autre lien indiqué dans le code Javascript exemple

Le conteneur logora_synthese est l'endroit où la synthèse est chargée.

Code standard à copier/coller et compléter :

<div class="logora_synthese" data-object-id="logora_config"></div>
<script>
    // Variables de configuration
    var logora_config = {
        shortname: "NOM_APPLICATION", // Nom d'application présent dans votre espace d'administration
        debate: {
            identifier: "PAGE_IDENTIFIER" // Identifiant unique de la page
        }
    };

    (function() {
        var d = document, s = d.createElement('script');
        s.src = 'https://api.logora.fr/synthese.js'; // 'https://api.logora.fr/widget.js' pour le widget
        (d.head || d.body).appendChild(s);
    })();
</script>

debate.identifier (requis) : identifiant unique lié à la page. Cet identifiant doit être unique pour chaque page où est insérée la synthèse. Il permettra de récupérer le débat correspondant à la page. Par exemple, l'identifiant peut être l'ID dans votre base de données de l'article présent sur la page, ou un slug unique ('exemple-identifiant').

Le débat lié à la page doit ensuite être créé dans l'espace d'administration > créer un débat, en fournissant l'identifiant debate.identifier ou en sélectionnant l'article concerné dans la liste des derniers articles récupérés.

Écouter le chargement de la synthèse (optionnel)

Pour détecter le chargement de la synthèse, un événement logoraContentLoaded est déclenché sur l'objet window. Cet événement permet de récupérer des informations sur le débat qui s'affiche sur la page.

window.addEventListener('logoraContentLoaded', event => console.log(event.detail));

Format de l'objet event.detail :

debate: {
  direct_url: "https://www.exemple.fr/espace-debat/debat/mon-debat",
  id: 1000
  name: "Faut-il changer la constitution ?"
  slug: "mon-debat"
}

Si aucun débat n'est associé à la page, l'objet debate sera null.

Il ne reste plus qu'à implémenter l'authentification unique et à personnaliser Logora pour lancer votre premier débat.