Embed a call widget with no backend

Voiceclick-to-call widget

A sw-click-to-call element with a Click to Call token from the Dashboard and a destination address puts a call button on a page. No server of yours is in the call path.

call-fabrictokens

The claim

The Click-to-Call widget guide embeds the button with one script tag and one element. The guide is https://signalwire.com/docs/browser-sdk/guides/click-to-call-widget. The token is “created from a Click to Call resource in the dashboard”, and the widget “routes through embeds.signalwire.com automatically”. So the page needs no backend of yours: the Flask app here serves static HTML, reads no API credentials, and has one route. The page exposes no credentials of yours; the Click to Call token on it is public by design.

How it works

PAGE = """...
  <script src="{script}"></script>
...
  <sw-click-to-call token="{token}" destination="{destination}" label="{label}"></sw-click-to-call>
..."""

def page(token=None, destination=None, label=None):
    return PAGE.format(script=WIDGET_SCRIPT,
                       token=html.escape(token or C2C_TOKEN, quote=True),
                       destination=html.escape(destination or DESTINATION, quote=True),
                       label=html.escape(label or LABEL, quote=True))

What the browser receives:

<script src="https://unpkg.com/@signalwire/web-components/dist/embed/signalwire-web-components-embed.iife.js"></script>
<sw-click-to-call token="c2c_..." destination="/public/workshop" label="Talk to the workshop"></sw-click-to-call>

The three attribute values come from the environment, and the page escapes them on the way in. A label with a quote in it therefore stays a label. The destination is a Fabric address, such as a SWML script’s or an AI agent’s /public/... address; the guide’s example is /public/support.

Limitations

You prove the page. Whether the button rings the destination, and what the visitor hears, are the widget’s and the platform’s side of a live call.

A Click to Call token is public by design: it sits in the page source. Scope what it can dial in the Dashboard resource, not in the page.

What to change first

Point DESTINATION in .env at the address of your own agent, from let-a-browser-dial-your-agent-with-no-dashboard-setup, and run the app. The button dials your agent. The verifier sets its own fixtures before it imports the app, so it neither reads .env nor fails on it; the app is the live check.

Where this sits

Call from a browser Let a browser dial your agent with no dashboard setup

python/app.py

"""Embed a call widget with no backend.

The Click-to-Call widget guide
(https://signalwire.com/docs/browser-sdk/guides/click-to-call-widget) puts a
call button on a page with one script tag and one element:
`<sw-click-to-call token="c2c_..." destination="/public/support">`. The token
is "created from a Click to Call resource in the dashboard", and the widget
"routes through embeds.signalwire.com automatically", so no server of yours is
in the call path. This Flask app only serves the page. It reads no API
credentials, and the call never touches it.

Written against Flask. There is no SDK call here.
"""
import html
import os

from dotenv import load_dotenv
from flask import Flask, Response

# the SDK does not read .env for you
load_dotenv()

C2C_TOKEN = os.getenv("CLICK_TO_CALL_TOKEN")
DESTINATION = os.getenv("DESTINATION", "/public/support")
LABEL = os.getenv("LABEL", "Talk to the workshop")
if not C2C_TOKEN:
    raise SystemExit("CLICK_TO_CALL_TOKEN is required: Dashboard, Tools, Click to Call")

WIDGET_SCRIPT = ("https://unpkg.com/@signalwire/web-components/dist/embed/"
                 "signalwire-web-components-embed.iife.js")

PAGE = """<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ridgeline Cycles</title>
  <script src="{script}"></script>
</head>
<body>
  <h1>Ridgeline Cycles</h1>
  <p>Questions about a repair? Talk to us from this page.</p>
  <sw-click-to-call token="{token}" destination="{destination}"
                    label="{label}"></sw-click-to-call>
</body>
</html>
"""


def page(token=None, destination=None, label=None):
    """The page. Every attribute value is HTML-escaped on the way in."""
    return PAGE.format(script=WIDGET_SCRIPT,
                       token=html.escape(token or C2C_TOKEN, quote=True),
                       destination=html.escape(destination or DESTINATION, quote=True),
                       label=html.escape(label or LABEL, quote=True))


app = Flask(__name__)


@app.get("/")
def index():
    return Response(page(), mimetype="text/html")


if __name__ == "__main__":
    app.run(port=int(os.getenv("PORT", "8080")))

Run it

cd python
pip install -r requirements.txt
cp ../.env.example .env          # then edit .env: CLICK_TO_CALL_TOKEN, DESTINATION, LABEL
python app.py

In the Dashboard, open Tools, then Click to Call, and create a token; the guide names that path. Put the token and the destination address in .env, open http://localhost:8080/, and press the button. Nothing needs a public URL; the page is static, and the call goes to SignalWire.

Verify it

No network, no account.

cd ..                     # back to the recipe folder
python verify.py

You drive the Flask app with its test client and parse the page. These are checks on the page you serve. That the call routes through embeds.signalwire.com is the widget guide’s word, not something a local test can show. You assert the following.

the page is served as HTML, loads exactly the widget script the guide names, and holds exactly one sw-click-to-call element
that element’s token, destination and label are exactly the configured values
the page carries no project id and no API token, and the app has exactly one route
a label containing a quote is escaped, so it stays inside the attribute and adds no attribute of its own

Report an issue