# Opening Talend Cloud API Tester from any website

Talend Cloud API Tester allows you to insert a button in your website that will open your request directly in Talend Cloud API Tester.

## Procedure

1. In your HTML page, add the following meta tag to link it with Talend Cloud API Tester.
   ```
   <meta
     name="dhc-aware-page"
     data-indicator-element-id="<id_element>"
     data-console-debug="<allow-debug-logs>"
   >
   ```

   Parameters informationParameters information
   | Parameter | Type | Required | Description |
   | --- | --- | --- | --- |
   | name | String | Yes | The value must be dhc-aware-page. |
   | data-indicator-element-id | String | No | Specifies the id of the element Talend Cloud API Tester will inject in your page to let it know it is available. The<br>default value is dhcInfo. |
   | data-console-debug | Boolean | No | If the value is true, debug information will be<br>printed into the browser's JavaScript console (on your page). The<br>default value is false. |

   The injected element looks like this:
   ```
   <script id="my-id" client-indicator="my-id" type="dhc/info">
      {"dhcVersion":"23.0.1","extensionId":"aejoelaoggembcahagimdiliamlcdmfm"}
   </script>
   ```
2. Call window.postMessage with the following message object to instruct Talend Cloud API Tester to open.
   ```
   {
         target : "<extension_id>",
         type : "<type>",
         payloadType: "<type_of_payload>",
         payload : "<payload>",
         shouldReplaceOriginTab: <shouldReplaceOriginTab>
   }             
   ```

   Parameters informationParameters information
   | Parameter | Type | Required | Description |
   | --- | --- | --- | --- |
   | target | String | Yes | The ID of the Talend Cloud API Tester extension. It can be obtained from the Talend Cloud API Tester indicator element. For example:<br>JSON.parse(document.querySelector('script[type="dhc/info"]').innerText).extensionId<br><br>Or if you set data-indicator-element-id to<br>my-id in your meta tag:<br>JSON.parse(document.getElementById('my-id').innerText).extensionId |
   | type | String | Yes | The type of the message, instructs Talend Cloud API Tester on what action it should perform.The possible values are<br>openRequest or openExtension<br>(to open without loading a request). |
   | payloadType | String | Yes | The type of the payload to load in Talend Cloud API Tester. Possible values: apiTester if the<br>type parameter is set to<br>openRequest or none if it is<br>openExtension. |
   | payload | String | Only if the type is openRequest | The request to load if type is set to<br>openRequest. See the example below. |
   | shouldReplaceOriginTab | Boolean | No | Indicates whether Talend Cloud API Tester should be loaded in the tab sending<br>window.postMessage or in a new tab. The default<br>value is false. |
   ### Example
   ```
   {
      "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"
          }
      }
   }
   ```