---
schema_version: "1"
id: 0f490b96c704bb89417c2f07ea9793ae698d265dbb1c048539a6b16edba5ae09
title: Intégrer des tableaux de bord
collection: tableau
version: current
locale: fr-ca
portal_url: https://docs.salesforce.com/tableau/current/fr-ca/pro/desktop/embed_dashboard.md
canonical_url: https://help.tableau.com/current/pro/desktop/fr-ca/embed_dashboard.htm
source_site: help.tableau.com
content_type: documentation
content_hash: be3cdbf342f946239902caf2cab83b7caf14150c8e5873312d9e7f21baefffc7
description: Le code incorporé pour Tableau Server 2022
---
[Passer au contenu principal](#main-content)

# Intégrer des tableaux de bord

> [!TIP]
> 
> Le code incorporé pour Tableau Server 2022.3 et versions ultérieures et Tableau Cloud a été modifié pour utiliser l’API d’intégration v3. Pour obtenir des informations à jour sur les dispositions spécifiques à l’appareil et le dimensionnement du tableau de bord, consultez [Configurer les objets et composants d’incorporation](https://help.tableau.com/current/api/embedding_api/fr-ca/docs/embedding_api_configure.html#table-of-properties-and-values-for-embedded-objects-and-components) dans l[’aide de l’API d’incorporation](https://help.tableau.com/current/api/embedding_api/fr-ca/index.html). Les informations de cette rubrique concernent les versions antérieures de l’incorporation (utilisant l’API Tableau JavaScript v1 et v2).

Incorporer des tableaux de bord à l’aide de versions antérieures d’incorporation

Vous pouvez intégrer un tableau de bord Tableau dans votre propre site Web ou page wiki, et vous pouvez l’afficher dans différentes dispositions en fonction de la taille de l’iframe.

- Pour que la disposition correcte apparaisse automatiquement pour les utilisateurs quel que soit l’appareil utilisé, créez des dispositions spécifiques à un appareil pour votre tableau de bord dans Tableau Desktop. Dans ce cas, Tableau Server et Tableau Cloud affichent automatiquement la disposition correcte en fonction de la taille de l’iframe, à condition que vous utilisiez 100 % comme largeur et hauteur de l’iframe au lieu des valeurs de pixel exactes (voir ci-dessous).
- Pour qu’une disposition spécifique apparaisse toujours, quelle que soit la taille de l’iframe, utilisez le paramètre `device` dans votre code intégré.

Dans l’exemple suivant, le code intégré affiche un tableau de bord de 800 pixels de large par 600 pixels de hauteur. Les valeurs de largeur et de hauteur exactes font partie du code intégré par défaut que vous obtenez lorsque vous cliquez sur le bouton Partager en haut de votre vue ou de votre tableau de bord :

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz\_v1.js'></script>
  <div class='tableauPlaceholder' **style='width: 800px; height: 600px;'** >
  <object class='tableauViz' width='**800**' height='**600**' style='display:none;'>
  <param name='host\_url' value='http://mysite.myserver.com' />
  <param name='site\_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales\_Dashboard' />		
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original\_view=yes' /></object></div>

Dans cet exemple où le tableau de bord utilise des dispositions spécifiques aux appareils, les attributs de style pour la classe div ont été supprimés, et les valeurs de classe d’objet pour la largeur et la hauteur ont été remplacées par 100%. Dans la plupart des cas, la disposition correcte s’affiche, c’est-à-dire que la largeur et la hauteur ne sont pas également contrôlées ailleurs dans votre CSS.

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz\_v1.js'></script>
  <div class='tableauPlaceholder' >
  <object class='tableauViz' width='**100%**' height='**100%**' style='display:none;'>
  <param name='host\_url' value='http://mysite.myserver.com' />
  <param name='site\_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales\_Dashboard' />		
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original\_view=yes' /></object></div>

Si la disposition correcte ne s’affiche pas, ceci peut être parce que la page HTML que vous utilisez pour l’intégration a une balise `<!DOCTYPE html>` et que cette balise empêche les éléments dans le corps de la page d’être redimensionnés à 100 % (consultez les [détails sur le débordement de la pile](https://stackoverflow.com/questions/1966300/height-100-is-not-working-in-html-whfr-caing-doctype-how-i-can-fix-this)). Une solution de contournement consiste à ajouter les lignes suivantes au corps de votre page HTML :

<style>
  html, body { height: 100% }
</style>

L’exemple suivant part de l’hypothèse que le tableau de bord intégré utilise des dispositions spécifiques à un appareil. Le paramètre `device` est réglé sur `phone`. Cela signifie que, quel que soit l’appareil affichant le tableau de bord, la disposition affichée sera celle créée pour les téléphones.

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz\_v1.js'></script>
  <div class='tableauPlaceholder'>
  <object class='tableauViz' width='100%' height='100%' style='display:none;'>
  <param name='host\_url' value='http://mysite.myserver.com' />
  <param name='site\_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales\_Dashboard' />
  <param name='device' value='**phone**' />			
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original\_view=yes' /></object></div>

## Dimensions d’iframe et dispositions pour les appareils

La disposition de tableau de bord affichée par un appareil est basée sur la dimension la plus petite (hauteur ou largeur) de l’iframe où la vue Tableau s’affiche. Il peut arriver que les dispositions pour ordinateurs de bureau, tablettes ou téléphones s’affichent sur d’autres types d’appareils. Par exemple, une disposition pour tablette peut s’afficher sur un ordinateur de bureau si l’écran ou la fenêtre du navigateur est de petite taille.

<table style="width: 100%;"><colgroup><col><col></colgroup><tbody><tr><th style="text-align: left;">Si la dimension la plus petite de l’iframe est ...</th><th style="text-align: left;">la disposition pour cet appareil apparaît ...</th></tr><tr><td>500 pixels ou moins</td><td>Téléphone</td></tr><tr><td>Entre 501 et 800 pixels</td><td>Tablette</td></tr><tr><td>Supérieure à 800 pixels</td><td>Ordinateur de bureau</td></tr></tbody></table>

Pour plus d’informations sur la création d’un tableau de bord utilisant des dispositions spécifiques à un appareil, consultez [Créer des dispositions de tableau de bord pour différents types d’appareils](https://help.tableau.com/current/pro/desktop/fr-ca/dashboards_dsd_create.htm).