---
schema_version: "1"
id: 3604784f286933520c53e9d8892a8f3e794d9ac76f4eaebb5ef63377fc846031
title: Customize Your Connector
collection: tableau
version: current
locale: en-us
portal_url: https://docs.salesforce.com/tableau/current/en-us/api/webdataconnector/docs/wdc_customize_connector.md
canonical_url: https://help.tableau.com/current/api/webdataconnector/en-us/docs/wdc_customize_connector.html
source_site: help.tableau.com
content_type: documentation
content_hash: 503a7a6916bbd36ce19fd70f65cd1c42093c68f0da7fdf5e202189a4ebca5346
description: Documentation for the Tableau Web Data Connector
---
**Deprecated** - This repository will be removed with the Tableau 26.3 release.

The Web Data Connector 3.0 framework is deprecated and will not receive further updates. Migrate to the [REST API Connector on Tableau Exchange](https://exchange.tableau.com/products/1111)—built by Tableau, supports JSON and CSV over HTTP GET, Basic/Bearer/OAuth authentication, and runs on Tableau 2023.3 and later. Note: this connector is extract-only and requires a JDBC driver installation.

# Customize Your Connector

  

🕐 _3 min read_

To create your connector, we recommend that you first create a sample connector and edit those files. It’s easier to get all the files and directory structure your connector needs by just using an existing example.

Use the connector you created in the [Get Started](/current/api/webdataconnector/en-us/index.html) topic. Copy that sample connector directory to another directory. You’re now ready to create your own connector.

To create your connector, do the following steps.

## Step 1: Configure your connector’s properties

In your new connector directory, find and open the `connector.json` file.

```
{
  "name": "my-first-connector",
  "version": "1.0.0",
  "tableau-version": {
    "min": "2022.3"
  },
  "vendor": {
    "name": "vendor-name",
    "support-link": "https://vendor-name.com",
    "email": "support@vendor-name.com"
  },
  "permission": {
    "api": {
      "https://*.usgs.gov/": [
        "GET",
        "POST",
        "HEAD"
      ]
    }
  },
  "auth": {
    "type": "none"
  },
  "window": {
    "height": 800,
    "width": 600
  }
}
```

Make the following changes:

1. Change the general properties.
    
    | Name | Value |
    | --- | --- |
    | name | Your connector’s name. This is the name that appears in Tableau. |
    | version | Your connector’s version |
    | min | The earliest Tableau version your connector supports |
2. Change the company properties.
    
    | Name | Value |
    | --- | --- |
    | vendor.name | Your company name |
    | vendor.support-link | Your company’s URL |
    | vendor.email | Your company’s email |
3. Change the permissions.
    
    | Name | Value |
    | --- | --- |
    | permission.api | The URI for the API that the connector is allowed to access, along with the methods (POST, GET, PUT, PATCH, DELETE) that the connector is allowed to use. |
4. Change the auth type.
    
    | Name | Value |
    | --- | --- |
    | auth.type | Accepted values are `custom`, `oauth`, and `none`. |
    
    Use `none` for your first test connector.
5. Change the HTML pane size.
    
    | Name | Value |
    | --- | --- |
    | window.height | The height of the connector HTML pane |
    | window.width | The width of the connector HTML pane |

## Step 2: Create the user interface

When you open a web data connector in Tableau, the connector displays an HTML page that links to your JavaScript code and to your connector’s handlers. Optionally, this page can also display a user interface for your users to select the data that they want to download.

To create a user interface for your connector, open the `/app/index.html` file.

```
<!DOCTYPE html>
<html>

<head>
  <title>USGS Earthquake Feed</title>
  <meta http-equiv="Cache-Control" content="no-store" />
  <link rel="shortcut icon" href="#" />
  <link href="index.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
  <script src="index.js" type="module"></script>
</head>

<body style="background-color: white;">
  <p id="error" style="display: block; margin-top: 2em; height: 5px; text-align: center; color: red;"></p>
  <div class="box">
    <button type="button" id="submitButton" disabled>Please wait while settings
      load...</button>
  </div>
  </div>
</body>

</html>
```

Let’s run through what the code is doing. Skipping over the standard markup for an HTML page, notice the following between the `head` tags:

- The `meta` tag prevents your browser from caching the page.
- The `index.css` and `toastify.min.js` files are used to simplify styling and formatting.
- The `index.js` file is the code for your connector.

Between the `body` tags, there’s a simple button element that illustrates how users can interact with your connector before getting data. In the next step, we’ll configure what happens when that button is clicked.

## Step 3: Edit the connector object

Now that you’ve created a user interface, it’s time to edit the JavaScript code for the connector’s button. First, open the `/app/index.js` file.

```
import Connector from '@tableau/taco-toolkit'

function onInitialized() {
  const elem = document.getElementById('submitButton')
  elem.innerText = 'Get Earthquake Data!'
  elem.removeAttribute('disabled')
}

const connector = new Connector(onInitialized)

function submit() {
  connector.handlerInputs = [
    {
      fetcher: 'MyFetcher',
      parser: 'MyParser',
      data: {
        url: 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson',
      },
    },
  ]
  connector.submit()
}

window.addEventListener('load', function () {
  document.getElementById('submitButton').addEventListener('click', submit)
})
```

Some notes about the code:

- Both the `fetcher` and `parser` refer to the handlers. These are JavaScript files in the `handlers` directory. These files are the backend of your connector. Keep the values the same, unless you plan to change the filenames.
- Change the `url` value to the URL where you want to your connector to get your data.
- The names of the fetcher and parser must match the filenames in the handlers directory.

## Step 4: Update the fetcher file

If your data is complex and needs preprocessing, use the TACO Toolkit library to prepare your data. The following is the default code that the fetcher uses to get the data:

```
import { Fetcher, FetchUtils } from '@tableau/taco-toolkit/handlers'

export default class MyFetcher extends Fetcher {
  async *fetch({ handlerInput }) {
    const data = handlerInput.data
    yield await FetchUtils.fetchJson(data.url)
  }
}
```

## Step 5: Configure how the data is presented

Now you must define how you want to map the data to one or more or tables. This mapping of data is done in the schema.

To decide how to map your data, look at your data source. When you’re done looking at the summary of the JSON data source, make the necessary edits to structure the returned data.

```
import { Parser } from '@tableau/taco-toolkit/handlers'

export default class MyParser extends Parser {
  parse(fetcherResult, { dataContainer }) {
    const tableName = 'Earthquake Data'

    const containerBuilder = Parser.createContainerBuilder(dataContainer)
    const { isNew, tableBuilder } = containerBuilder.getTable(tableName)

    if (isNew) {
      tableBuilder.addColumnHeaders([
        {
          id: 'id',
          dataType: 'string',
        },
        {
          id: 'mag',
          alias: 'magnitude',
          dataType: 'float',
        },
        {
          id: 'title',
          alias: 'title',
          dataType: 'string',
        },
        {
          id: 'location',
          dataType: 'geometry',
        },
      ])
    }

    const { features } = fetcherResult
    if (features.length > 0) {
      tableBuilder.addRows(
        features.map(({ id, geometry: location, properties: { mag, title } }) => {
          return { id, mag, title, location }
        })
      )
    }

    return containerBuilder.getDataContainer()
  }
}
```

## Step 6: Build your connector

Enter these commands to build, pack, and run your new connector:

```
taco build
```

```
taco pack
```

```
taco run Desktop
```