Présentation

Remarque : il est fortement recommandé d'avoir de l'expérience en conception web (HTML et CSS) pour configurer les paramètres de personnalisation. Si vous contactez l'assistance de Zoom pour obtenir de l'aide, vos questions seront traitées avec toute l'attention voulue, mais la résolution de vos problèmes n'est pas garantie. Consultez un développeur web si vous rencontrez des problèmes avec votre code HTML/CSS.

Une fois votre URL de redirection approuvée, vous pouvez la personnaliser avec la marque de votre organisation. Consultez nos lignes directrices de personnalisation avant de personnaliser votre page avec le logo Zoom ou d'autres éléments de marketing.

Les modifications apportées ne s'appliqueront que lors de l'accès à Zoom Web Portal depuis votre URL de redirection (par ex., votreorganisation.zoom.us). La personnalisation ne s'appliquera pas en cas d'accès à Web Portal depuis zoom.us.

Remarque : Javascript n'est actuellement pas pris en charge pour la personnalisation.

Configuration requise

• Forfait Affaires, Éducation ou API
• URL de redirection approuvée conforme à nos lignes directrices (par exemple, success.zoom.us)
• Administrateur familiarisé avec HTML/CSS

Cet article traite des sujets suivants :

• Accéder aux paramètres de personnalisation
• Télécharger des images
• Personnaliser la page d'accueil
  
  • Image d’arrière-plan
  • Couleur du texte de contenu
  • Titre de page
  • Couleur d'arrière-plan des boutons
  • Couleur d'arrière-plan des boutons lors du passage du curseur
  • Couleur du texte des boutons
  • Logo
• Personnalisation de l'en-tête, du pied de page et de la barre latérale de Web Portal
• Utiliser une CSS personnalisée
• Personnaliser les modèles d'e-mails
• Personnaliser les modèles d'e-mails d'invitation à une réunion

Accéder aux paramètres de personnalisation

1. Connectez-vous à Zoom Web Portal.
2. Dans le menu de navigation, cliquez sur Avancé, puis sur Personnalisation.

Télécharger des images

Avant de configurer la personnalisation, téléchargez les images que vous souhaitez utiliser, comme l'image d'arrière-plan et le logo de votre organisation.

1. Connectez-vous à Zoom Web Portal.
2. Dans le menu de navigation, cliquez sur Avancé, puis sur Personnalisation.
3. Cliquez sur l'onglet Images.
4. Parcourez votre ordinateur et sélectionnez l'image que vous souhaitez importer.
5. Une fois importés, les fichiers apparaissent dans la liste. L'URL de l'image est affichée dans la colonne Chemin.
   

Personnaliser la page d'accueil

La page d'accueil est la page principale de l'URL de redirection de votre organisation.Par défaut, la page d'accueil ressemble à ceci :

Pour personnaliser le code HTML et la CSS en ligne de la page d'accueil :

1. Connectez-vous à Zoom Web Portal.
2. Dans le menu de navigation, cliquez sur Avancé, puis sur Personnalisation.
3. Clquez sur l'onglet Page d'accueil.
4. Suivez les sections ci-dessous pour apporter des modifications de base à la page d'accueil et la personnaliser en fonction de votre organisation.
   Remarque : pour accéder plus rapidement aux attributs ci-dessous, appuyez sur Ctrl + F et saisissez le nom de l'attribut. Suivez ensuite les instructions pour mettre à jour l'attribut.

Image d’arrière-plan

Nom de l'attribut : background-image

Pour modifier l'image d'arrière-plan, remplacez l'URL entre guillemets par l'URL de l'image d'arrière-plan importée. Pour trouver l'URL de l'image d'arrière-plan, allez dans l'onglet Images et copiez le lien dans la colonne Chemin.

Exemple :

background-image: url("https://yourorganization.zoom.us/account/branding/p/backgroundimage.jpg");

Couleur du texte de contenu

Pour changer la couleur de texte du contenu de la page d'accueil (à l'exclusion des boutons), ajoutez l'attribut couleur dans .content-body { }. Utilisez une couleur plus claire si votre arrière-plan est sombre.

Exemple :

.content-body {
 display: table-cell;
 vertical-align: middle;
 color: white;
}

Titre de page

Nom de l'attribut: title

Le titre de page modifie ce qui s'affiche dans un navigateur pour le nom de la page. Saisissez le titre de votre page entre <title> et </title>.

Exemple :

<title>Visioconférence, conférence sur le web, réunions en ligne, partage d'écran</title> <!--customize landing page title-->

 

Couleur d'arrière-plan des boutons

Nom de l'attribut : background-color (recherchez l'attribut background-color sous .button)

Pour modifier la couleur d'arrière-plan des trois boutons (Participer, Animer et Se connecter), vous devez spécifier des couleurs à l'aide des valeurs hex de couleur : par exemple, #FFFFFF correspond au blanc. Utilisez Colorpicker pour identifier et sélectionner les couleurs en fonction de leur valeur hex.

.button {
 width: 80px;
 background-color: #000000; /*customize button color */
 border-color: #2D8CFF;
 padding: 12px 20px;
 display: inline-block;
 text-align: center;
 margin: 10px 0;
 transition: .3s ease;
}

Couleur d'arrière-plan des boutons lors du passage du curseur

Nom de l'attribut : background-color (sous .button.hover)

Pour modifier la couleur du bouton lorsque vous passez le curseur de la souris dessus, spécifiez une couleur à l'aide de sa valeur hex : par exemple, #FFFFFF correspond au blanc. Utilisez Colorpicker pour identifier et sélectionner les couleurs en fonction de leur valeur hex.

Exemple :

.button:hover {
  background-color: #eb9834; /*customize button color */
 }

Couleur du texte des boutons

Attribut : color (sous .btn-text)

Modifier la couleur du texte à l'intérieur du bouton. Si vous avez utilisé une couleur sombre pour l'arrière-plan de votre bouton, paramétrez l'attribut sur blanc. Si vous avez une couleur d'arrière-plan claire, paramétrez l'attribut sur noir.Vous pouvez aussi spécifier une valeur hex personnalisée.Utilisez Colorpicker pour identifier et sélectionner les couleurs en fonction de leur valeur hex.

Exemple :

.btn-text {
 color: #008BFF; /*customize button font color */
 font-size: 17px;
}

Logo

Modifier le logo affiché au-dessus des trois boutons.Pour trouver l'URL du logo, allez dans l'onglet Images et copiez le lien dans la colonne Chemin.

Remarque : par défaut, le logo est redimensionné en 140 px par 31,5 px. Votre logo sera certainement déformé. Pour y remédier, supprimez class="zoom-logo" après l'URL de l'image dans le code HTML de la page d'accueil.

Exemple :

<div class="row">
  <img src="https://zoom.us/account/branding/p/1c7dfaf5-2646-4224-92e0-5abef82036b1.png" alt="Zoom Logo"> <!--customize company logo-->
<div class="row">

 

Personnalisation de l'en-tête, du pied de page et de la barre latérale de Web Portal

Vous pouvez personnaliser l'en-tête et le pied de page qui s'affichent dans tout Web Portal lorsque vous y accédez depuis votre URL de redirection.

Remarque : ces paramètres n'affectent pas votre page d'accueil.

1. Connectez-vous à Zoom Web Portal.
2. Dans le menu de navigation, cliquez sur Avancé, puis sur Personnalisation.
3. Cliquez sur l'onglet En-tête/Pied de page/Barre latérale.
4. Suivez les sections ci-dessous :

• URL du logo : personnalisez le logo de l'en-tête.Collez l'URL d'une image que vous avez importée. Vous pouvez coller l'URL d'une image externe si vous souhaitez stocker votre image en externe.
• HTML de l'en-tête : personnalisez la barre d'en-tête flottante.
• HTML du pied de page : vous pouvez supprimer le pied de page avec les informations et liens relatifs à Zoom de votre URL de redirection. Pour supprimer le pied de page, supprimez tout le code de la section correspondante et remplacez-le par ce qui suit.

<div id="footer" class="container">
</div>

•  Afficher les liens fréquemment utilisés dans la barre latérale gauche : modifiez les liens affichés dans le menu de navigation côté gauche.

Utiliser une CSS personnalisée

Vous pouvez personnaliser la CSS utilisée pour Web Portal.

Remarque : la CSS personnalisée ne s'applique pas à la page d'accueil. Vous pouvez personnaliser la CSS en ligne de votre page d'accueil.

1. Connectez-vous à Zoom Web Portal.
2. Dans le menu de navigation, cliquez sur Avancé, puis sur Personnalisation.
3. Cliquez sur l'onglet Personnaliser CSS.
4. Cliquez sur Modifier pour la CSS sélectionnée que vous souhaitez personnaliser.
5. Utilisez la CSS personnalisée pour définir d'autres sélecteurs CSS.

Personnaliser les modèles d'e-mails

Vous pouvez personnaliser des modèles pour les e-mails administratifs généraux, par exemple les e-mails envoyés lorsqu'un utilisateur réinitialise son mot de passe ou se connecte.

1. Connectez-vous à Zoom Web Portal.
2. Dans le menu de navigation, cliquez sur Avancé, puis sur Personnalisation.
3. Cliquez sur l'onglet E-mails.
4. Cliquez sur Modifier à côté du modèle que vous souhaitez modifier.
   Remarque : vous pouvez utiliser des variables d'e-mail personnalisées dans le modèle.

Personnaliser les modèles d'e-mails d'invitation à une réunion

Vous pouvez aussi personnaliser les modèles d'e-mails d'invitation à une réunion au niveau du compte ou du groupe.

1. Connectez-vous à Zoom Web Portal.
2. Dans le menu de navigation, accédez aux paramètres du compte ou du groupe :
   • Compte : cliquez sur Gestion du compte, pui sur Paramètres du compte.
   • Groupe : cliquez sur Gestion des utilisateurs, puis sur Gestion des groupes. Cliquez sur le nom du groupe ou créez un nouveau groupe d'utilisateurs.
3. Cliquez sur l'onglet Réunion.
4. Dans la section Personnalisation des e-mails d'invitation,
5. Cliquez sur Modifier pour le modèle d'e-mail que vous souhaitez mettre à jour.Découvrez-en plus sur le modèle d'e-mail de planification d'une réunion.
6. Cliquez sur Appliquer les modifications, puis sur Terminer.