Skip to content

Transitous Widget

Jump to bottom
Jonah Brüchert edited this page Dec 2, 2025 · 1 revision

The connection search website found on https://transitous.org can be embedded into your own website. Please make sure to read the usage policy before embedding it.

We are happy about pull requests that improve the embedding API, as this was built by someone who usually does little web development.

Example

Here is a minimal example of a website using the widget:

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="https://transitous.org/bootstrap.min.css">
    <link rel="stylesheet" href="https://transitous.org/bootstrap-icons.min.css">
</head>
<body>
    <div>
        <!-- Widget-specific styling. Move bootstrap import here if you are not otherwise using it. -->
        <style scoped>
            @import "https://transitous.org/custom.css";
        </style>
        <div id="searchbox" class="card" style="max-width: 500px"></div>
    </div>

    <script src="https://transitous.org/widget.js"></script>
    <script src="https://transitous.org/embed.js"></script>
    <script>
        let destination = {
            "lat" : 48.221738,
            "lon" : 16.395829,
            "name" : "Open Transport Community Conference",
            "type" : "PLACE",
        }
        createTransitousWidget("searchbox", null, destination)
    </script>
</body>
</html>

We recommend copying the relevant css and js files to your website, since we cannot promise to keep the JS API compatible right now.

You should now be seeing something like this:

Screenshot of the search widget

Setting start or destination

The format of the objects is the same that is returned by the geocoding endpoint. You can use the developer tools of your browser to find the data for your place, by searching for it on https://transitous.org / https://api.transitous.org.

Clone this wiki locally