The Île-de-France Mobilités Itinerary search White label lets you provide your users with a multimodal route planner for their journeys.

<h2 id="description-d%C3%A9taill%C3%A9e">Detailed description</h2><p>The "Itinerary search" white label from Île-de-France Mobilités allows you to easily integrate this widget on your website.</p><p>Thanks to this integration, you'll be able to enable your users to make their journeys easier by offering them public transport, bike and Carsharing itineraries. </p><h2 id="utilisation-du-widget">Using the widget </h2><p>You must be logged in to <a href="https://connect.iledefrance-mobilites.fr/auth/realms/connect-b2b/protocol/openid-connect/auth?client_id=prim&redirect_uri=https%3A%2F%2Fprim.iledefrance-mobilites.fr%2Ffr%2Fwidgets%2Fidfm-marque_blanche-a&response_type=code&scope=openid+email&ref=ile-de-france-mobilites">your user account</a> to integrate and use this widget. </p><p>As indicated in the documentation, an authentication token must be added in the "body" section: it allows us to verify that users wishing to integrate this widget do indeed have an account on PRIM. </p><p>Without this authentication token, the integrated widget will not be functional. </p><p>To be able to generate an authentication token, simply <a href="https://connect.iledefrance-mobilites.fr/auth/realms/connect-b2b/protocol/openid-connect/auth?client_id=prim&redirect_uri=https%3A%2F%2Fprim.iledefrance-mobilites.fr%2Ffr%2Fwidgets%2Fidfm-marque_blanche-a&response_type=code&scope=openid+email&ref=ile-de-france-mobilites">log in / register</a> and go to the <a href="http://prim.iledefrance-mobilites.fr/fr/mes-jetons-authentification">"my API token"</a></p> page.
        <div class="kg-card kg-file-card kg-file-card-medium">
            <a class="kg-file-card-container" href="http://prim.iledefrance-mobilites.fr/content/files/2023/07/Documentation-fonctionnelle-PRIM----Syst-me-d-authentification-.pdf" title="Download" download>
                <div class="kg-file-card-contents">
                    <div class="kg-file-card-title">Functional documentation PRIM Authentication system </div>
                    
                    <div class="kg-file-card-metadata">
                        <div class="kg-file-card-filename">PRIM functional-documentation----Syst-me-d-authentification-.pdf</div>
                        <div class="kg-file-card-filesize">470 KB</div>
                    </div>
                </div>
                <div class="kg-file-card-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>download-circle</title><polyline class="a" points="8.25 14.25 12 18 15.75 14.25"/><line class="a" x1="12" y1="6.75" x2="12" y2="18"/><circle class="a" cx="12" cy="12" r="11.25"/></svg>
                </div>
            </a>
        </div>
        <h2 id="conditions-g%C3%A9n%C3%A9rales-dutilisation-des-marques-blanches-%C3%AEle-de-france-mobilit%C3%A9s">Conditions Générales d'Utilisation des marques-blanches "Île-de-France Mobilités"</h2><p>All White label CSS styles are overrideable. However, the phrase "Un service Île-de-France Mobilités" must remain displayed.</p>

<p></p><p>The items listed below will help you understand how to integrate the "Itinerary search" White label into your website. </p><h2 id="g%C3%A9n%C3%A9ration-dun-jeton-dauthentification">Generation of an authentication token </h2><p>The use of the "Itinerary search" white label is conditional on the generation of an API token, it can be generated on the <a href="http://prim.iledefrance-mobilites.fr/en/mes-jetons-authentification">PRIM</a>.</p><p>Then simply enrich the value of "apiKey" in the "vianavigo" Config with the value of the generated key:</p><pre><code class="language-javascript">vianavigo.apiKey = "[API Token]";</code></pre><h2 id="Inserting-scripts">Inserting scripts</h2><h3 id="Modifications-in-tag-head">Modifications in tag &lt;head&gt;</h3><p>(<u>Warning</u>, it's fundamental to add these scripts in the order shown below)</p><p>In tag &lt;head&gt;, add the following script: </p><pre><code class="language-javascript">&lt;script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre><p>In the tag &lt;head&gt; , add the bootstrap part (in its version 3.3.6 mandatory): </p><pre><code class="language-javascript">&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre><p>In the tag &lt;head&gt; , add the white label dependencies: </p><pre><code class="language-javascript">&lt;script type="text/javascript" src="https://mb-iv.iledefrance-mobilites.fr/v2.2/vianavigo.vendor.js"&gt;&lt;/script&gt; </code></pre><p>Then add the specific files for each White label:</p><pre><code class="language-javascript">&lt;link href="https://mb-iv.iledefrance-mobilites.fr/v2.2/css/vianavigo.itinerary.css" rel="stylesheet" type="text/css" charset="UTF-8" /&gt;
&lt;script type="text/javascript" src="https://mb-iv.iledefrance-mobilites.fr/v2.2/vianavigo.itinerary.js"&gt;&lt;/script&gt;
&lt;meta charset="UTF-8"&gt;</code></pre><h3 id="modifications-in-the-tag-body">Modifications in tag &lt;body&gt;</h3><p>In tag <u>&lt;body&gt; ,</u> at the end, add:</p><pre><code class="language-javascript">&lt;div id="selecteur"&gt;&lt;/div&gt;
    &lt;script type="text/javascript"&gt;

        vianavigo.apiKey = '';
      
        const config = {
            
            departureFixed: false,
            arrivalFixed: false,
            showMap: true
        }
    
        vianavigo.itinerary('#selector', 'landscape', config);
    
    &lt;/script&gt;</code></pre><p>Replacing:</p><ul><li>"selector" with your html selector (internally uses the <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector?ref=ile-de-france-mobilites">document.querySelector</a> method),</li><li>vianavigo.api key corresponds to the API key you need to generate on the <a href="http://prim.iledefrance-mobilites.fr/fr/mes-jetons-authentification">PRIM</a> site. </li><li>config concerns the configuration for setting the "Itinerary search" white label (<a href="https://doc-iv.iledefrance-mobilites.fr/api-whitelabel-2.2/integration/?ref=ile-de-france-mobilites#parametres-a-definir">see Parameters to be defined</a>).</li></ul><h2 id="param%C3%A8tres-%C3%A0-d%C3%A9finir">Parameters to be defined </h2><p>In order to set up the white label, add a configuration containing two parameters:</p><ul><li>showmap</li><li>departure / arrival</li></ul><p>It is possible to integrate a white label with or without a route map. </p><p>For example, simply set {"showMap":true} for the map to be displayed.</p><p>It's also possible to set the departure or arrival points by setting <em>departureFixed: true</em> and <em>arrivalFixed: true</em></p><p>Here's an example of syntax for configuring the white label:</p><pre><code class="language-javascript">{
    "departure":
    {
        "type": "StopArea",
        "id":"stop_area:IDFM:1234",
        "x":2.050832280352467,
        "y":48.86731210533595,
        "name": "GARE DE ST NOM LA BRETECHE FORET DE MARLY, L'Étang-la-Ville",
        "zipCode": "78620",
        "city": "La'Étang-la-Ville"
    },
    "arrival":
    {
        "type": "StopArea",
        "id":"stop_area:IDFM:1234",
        "x":2.4404084017528147,
        "y":48.84444652498283,
        "name": "Château de Vincennes, Vincennes",
        "zipCode": "94300",
        "city": "Vincennes"
    },
    "departureFixed":false,
    "arrivalFixed":false,
    "showMap":true
}</code></pre><p>To retrieve the information needed to configure the <em>"departure"</em> and <em>"arrival"</em> points, we need to make a call to the "Places" API, which returns information about the locations we're looking for. To make this call, simply use the url:</p><pre><code class="language-HTML">https://prim.iledefrance-mobilites.fr/marketplace/places</code></pre><p>For example, to retrieve departure/arrival points corresponding to the term 'station' use the following query:</p><pre><code class="language-HTML">https://prim.iledefrance-mobilites.fr/marketplace/places?q=station</code></pre><p>To be able to make this call, you need to use the same token as mentioned in the first paragraph of this tab ("Generating an authentication token"). </p><p>To insert the generated authentication token, simply include 'apikey' in the request header and assign it the value of the generated key.</p><p>The API then returns a JSON response that contains all the proposals corresponding to the initial request.</p><p>Here's an example response that provides information on the stop found "Gare du Nord":</p><pre><code class="language-json">{
    "name": "Gare du Nord",
    "id": "stop_area:IDFM:71410",
    "quality": 0,
    "x": 601491.265157544,
    "y": 2431406.7634461853,
    "type": "StopArea",
    "city": "Paris 10e Arrondissement",
    "zipCode": "75010",
    "modes": [
        "LocalTrain",
        "RapidTransit",
        "Metro",
        "Bus"
    ],
    "insee": "75110"
}</code></pre><p>The information provided in the example above allows you to find all the parameters required for White label configuration.</p><h2 id="content-security-policy">Content Security Policy</h2><p>The addition of a widget within your site or application may require a modification to your CSPs. </p><h2 id="exemple-dint%C3%A9gration">Exemple d'intégration </h2><h3 id="ajouter-%C3%A0-la-fin-du-tag-head">Add at the end of tag &lt;head&gt; </h3><pre><code class="langue-javascript">&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;

&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;

&lt;link href="https://mb-iv.iledefrance-mobilites.fr/v2.2/css/vianavigo.itinerary.css" rel="stylesheet" type="text/css" charset="UTF-8" /&gt;

&lt;script type="text/javascript" src="https://mb-iv.iledefrance-mobilites.fr/v2.2/vianavigo.vendor.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript" src="https://mb-iv.iledefrance-mobilites.fr/v2.2/vianavigo.itinerary.js"&gt;&lt;/script&gt;
</code></pre><h3 id="ajouter-%C3%A0-la-fin-du-tag-body">Add at the end of tag &lt;Body&gt; </h3><pre><code class="language-javascript">&lt;script type="text/javascript"&gt;

    vianavigo.apiKey = 'LHOHzHo7DE1MuohZMizgUnH51AFt76KQ';

    const config = {
        departure: {
            type: "StopArea",
            id: "stop_area:IDFM:71139",
            x: 598739.5044158803,
            y: 2426923.7494442496,
            name: "Gare Montparnasse",
            zipCode: "75015",
            city: "Paris 15e Arrondissement"
        },
        arrival: {
            type: "StopArea",
            id: "stop_area:IDFM:71370",
            x: 599175.3875363291,
            y: 2430848.0117661394,
            name: "Gare Saint-Lazare",
            zipCode: "75008",
            city: "Paris 8e Arrondissement"
        },
        departureFixed: false,
        arrivalFixed: false,
        showMap: true
    }

    vianavigo.itinerary('#selector', 'landscape', config);

&lt;/script&gt;</code></pre>

White label Itinerary search

Detailed description

Using the widget

Conditions Générales d'Utilisation des marques-blanches "Île-de-France Mobilités"

Data recommendations