In Depth Explanation

We’ll explain with the script you load exactly does. We take the script from the quick start page:

<script>
  var tdsPcInpageConfig = tdsPcInpageConfig || {}
  tdsPcInpageConfig["widget"] = {
    elementId: "tds-widget",
    portal: "[the portal you want]",
    token: "[your TDS token for the selected portal]",
    widget: "[the widet you want]"
  }
</script>

<div id="tds-widget"></div>

<script src="https://pcf.tdscd.com/pc-inpage.js" async></script>

There are 3 parts here.

Your Configuration

The first part:

<script>
  var tdsPcInpageConfig = tdsPcInpageConfig || {}
  tdsPcInpageConfig["widget"] = {
    elementId: "tds-widget",
    portal: "[the portal you want]",
    token: "[your TDS token for the selected portal]",
    widget: "[the widet you want]"
  }
</script>

In this part you can configure the script to your likings. You basically set a JavaScript variable called tdsPcInpageConfig, which is an Object of objects. Each object inside the tdsPcInpageConfig object configures another widget on the current page.

It is important that every widget key in the tdsPcInpageConfig object is unique. So an example of a configuration for 2 widgets on the current page could be:

<script>
  var tdsPcInpageConfig = tdsPcInpageConfig || {}
  tdsPcInpageConfig["widget_1"] = {
    elementId: "tds-widget-1",
    portal: "[the portal you want]",
    token: "[your TDS token for the selected portal]",
    widget: "[the widet you want]"
  }

  tdsPcInpageConfig["widget_2"] = {
    elementId: "tds-widget-2",
    portal: "[the portal you want]",
    token: "[your TDS token for the selected portal]",
    widget: "[the widet you want]"
  }
</script>

You can also do this on different parts of your site.

The DIV on the Page

To load a widget on you page, you need to put an empty DIV on your page in the position where you want the widget to load:

<div id="tds-widget"></div>

The id of the DIV has to be unique and correspond with the elementId in the configuration for the widget you want to load in that position.

The Script

The last line:

<script src="https://pcf.tdscd.com/pc-inpage.js" async></script>

This loads the PC Frontend script into your page. You may also call it synchronously, like this:

<script src="https://pcf.tdscd.com/pc-inpage.js"></script>

Also it doesn’t matter where you call the script. In the head of your page, the bottom or the middle or even from an external tag manager. The script waits for the tdsPcInpageConfig variable to be available on the site, before it does something. The only thing that is important is that when the script “sees” the tdsPcInpageConfig variable, the variable is complete. You cannot dynamically add widgets or configuration to the variable after the script has read it (actually you can, but it won’t do anything). So if you want to make sure that the tdsPcInpageConfig variable is complete before the script runs, best is to load the script at the end of you page.