# Voice+™ over the phone

Voice+ can be very useful in multi-modal interactions where users calling in over the phone are directed to a particular webpage, where they can continue talking over the phone but the conversation and the web experience are in sync.

Generally the basic setup is usually that the user is directed to a specific webpage (perhaps via SMS or other medium) that includes the Conversation ID in the URL. Then Touchpoint is initialized in `external` mode with that particular Conversation ID (Touchpoint will then remember that Conversation ID automatically, so following links will keep the same conversation active for the user).

{% stepper %}
{% step %}

### Send the user a URL with a conversation ID

This can be achieved via a *Data request* node, for example:

<figure><img src="https://3978076094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2VnkvXtkrR2qhkVBmB1l%2Fuploads%2FfiIr7qP6QfujK725uDN6%2FScreenshot%202026-01-13%20at%2010.37.39.png?alt=media&#x26;token=fcdb5c38-0b33-4787-b1e9-2b653e878348" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Start a Voice+ node

Turn your conversation into a Voice+ session using a Voice+ node:

<figure><img src="https://3978076094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2VnkvXtkrR2qhkVBmB1l%2Fuploads%2FIwqzWS77xazoeiArAmBq%2FScreenshot%202026-01-13%20at%2010.39.50.png?alt=media&#x26;token=2a46e37f-5185-4354-b8ed-598b2ae7b7de" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Integrate Touchpoint in external mode

On the destination page (the one you sent to your users), add the following snippet:

{% tabs %}
{% tab title="HTML" %}

<pre class="language-javascript" data-overflow="wrap" data-full-width="true"><code class="lang-javascript">&#x3C;html lang="en">
  &#x3C;head>
    &#x3C;title>Touchpoint Sample HTML&#x3C;/title>
    &#x3C;meta name="viewport" content="width=device-width, initial-scale=1">
  &#x3C;/head>
  &#x3C;body>
    &#x3C;script type="module">
      import { create } from "https://unpkg.com/@nlxai/touchpoint-ui/lib/index.js?module";
      
      const touchpoint = await create({
        config: {
          applicationUrl: "REPLACE_WITH_APPLICATION_URL",
          headers: {
            "nlx-api-key": "REPLACE_WITH_API_KEY"
          },
          languageCode: "en-US",
<strong>          conversationId: new URLSearchParams(window.location.search).get("cid")
</strong>        },
<strong>        input: "external",
</strong><strong>        bidirectional: {}
</strong>      });
    &#x3C;/script>
  &#x3C;/body>
&#x3C;/html>
</code></pre>

{% endtab %}

{% tab title="Typescript + NPM" %}

<pre class="language-typescript" data-overflow="wrap"><code class="lang-typescript">import { create } from "@nlxai/touchpoint-ui";
      
const touchpoint = await create({
  config: {
    applicationUrl: "REPLACE_WITH_APPLICATION_URL",
    headers: {
      "nlx-api-key": "REPLACE_WITH_API_KEY"
    },
    languageCode: "en-US",
<strong>    conversationId: new URLSearchParams(window.location.search).get("cid")
</strong>  },
<strong>  input: "external",
</strong><strong>  bidirectional: {}
</strong>});
</code></pre>

{% endtab %}
{% endtabs %}

Note the `cid` parameter added to the message which is used to link the conversations together.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
In `external` mode Touchpoint renders no visible user interface, since we expect that all of the communication will still happen over the external channel. So all Touchpoint is providing in this case are its Voice+ capabilities.
{% endhint %}

You can customize the Voice+ experience exactly like regular Voice+:

{% content-ref url="../voice+-tm" %}
[voice+-tm](https://docs.nlx.ai/platform/developers/conversation-sdk/examples/voice+-tm)
{% endcontent-ref %}