# Ouvrir Talend Cloud API Tester à partir de n'importe quel site internet

Talend Cloud API Tester vous permet d'insérer un bouton sur votre site Web qui ouvrira votre requête directement dans Talend Cloud API Tester.

## Procédure

1. Sur votre page HTML, ajoutez le tag meta suivant afin de la lier à Talend Cloud API Tester.
   ```
   <meta   name="dhc-aware-page"   data-indicator-element-id="<id_element>"   data-console-debug="<allow-debug-logs>" >
   ```

   Informations des paramètresInformations des paramètres
   | Paramètre | Type | Requis | Description |
   | --- | --- | --- | --- |
   | name | Chaîne de caractères | Oui | La valeur doit être dhc-aware-page. |
   | data-indicator-element-id | Chaîne de caractères | Non | Spécifie l'identifiant de l'élément que Talend Cloud API Tester va injecter dans votre page afin de vous informer de sa disponibilité. La valeur par défaut est dhcInfo. |
   | data-console-debug | Booléen | Non | Si la valeur est true, l'information de débogage sera imprimée dans la console JavaScript du navigateur (sur votre page). La valeur par défaut est false. |

   L'élément injecté ressemble à :
   ```
   <script id="my-id" client-indicator="my-id" type="dhc/info">
      {"dhcVersion":"23.0.1","extensionId":"aejoelaoggembcahagimdiliamlcdmfm"}
   </script>
   ```
2. Appelez window.postMessage avec l'objet de message suivant afin de donner l'instruction à Talend Cloud API Tester de s'ouvrir.
   ```
   {
         target : "<extension_id>",
         type : "<type>",
         payloadType: "<type_of_payload>",
         payload : "<payload>",
         shouldReplaceOriginTab: <shouldReplaceOriginTab>
   }             
   ```

   Informations des paramètresInformations des paramètres
   | Paramètre | Type | Requis | Description |
   | --- | --- | --- | --- |
   | target | Chaîne de caractères | Oui | L'identifiant de l'extension de Talend Cloud API Tester. Peut être obtenu à partir de l'élément indicateur Talend Cloud API Tester. Par exemple : JSON.parse(document.querySelector('script[type="dhc/info"]').innerText).extensionId<br><br>Ou si vous définissez data-indicator-element-id sur my-id dans votre tag meta : JSON.parse(document.getElementById('my-id').innerText).extensionId |
   | type | String (Chaîne de caractères) | Oui | Le type de message donne les instructions à Talend Cloud API Tester concernant l'action qu'il doit réaliser. Les valeurs possibles sont openRequest ou openExtension (pour ouvrir sans charger une requête). |
   | payloadType | Chaîne de caractères | Oui | Le type de payload à charger dans Talend Cloud API Tester. Valeurs possibles : apiTester si le paramètre type est défini sur openRequest ou none s'il est défini sur openExtension. |
   | payload | Chaîne de caractères | Uniquement si le type est openRequest | La requête à charger si le type est défini à openRequest. Consultez l'exemple ci-dessous. |
   | shouldReplaceOriginTab | Booléen | Non | Indique si Talend Cloud API Tester doit être chargé dans l'onglet envoyant window.postMessage ou dans un nouvel onglet. La valeur par défaut est false. |
   ### Exemple
   ```
   {
      "name": "Post example on HTTP Bin",
      "headers": [
          {
              "enabled": true,
              "name": "Content-Type",
              "value": "application/json"
          }
      ],
      "type": "Request",
      "method": {
          "requestBody": true,
          "link": "",
          "name": "POST"
      },
      "body": {
          "autoSetLength": true,
          "textBody": "{\n  \"lastname\": \"Eastwood\",\n  \"firstname\": \"Clint\"\n}",
          "bodyType": "Text"
      },
      "headersType": "Form",
      "uri": {
          "path": "httpbin.org/post",
          "query": {
              "delimiter": "&",
              "items": [
                  {
                      "enabled": true,
                      "name": "details",
                      "value": "full"
                  }
              ]
          },
          "scheme": {
              "secure": true,
              "name": "https",
              "version": "V11"
          }
      }
   }
   ```