For developers

You can integrate our data in your blog or website. If you are a developer, website owner or blogger, this page shows you all the info you need to start displaying our data on your platform. We collect data and make it available through our website, our API and through widgets. If you have any questions, please contact us.

Relevant information for developers can be found under “Documentation” on Avoid-Crowds.dev our special domain for developers.

How to use API?

If you are a developer, our API is extremely easy to use. Simply go to our.dev information page, read all necessary information and access our documentation. The only thing to get started is a REST API token.

How to implement our widgets?

You can read all instructions here.

Some working examples are displayed below:

For example, we display our single text widget for “barcelona” for today’s data by using ‘dynamic relative format of date’:

  1. Insert our widget code in your website’s HTML (see more example on developer site);
  2. Save the page.
<div id="barcelona_today"
     data-token="YOUR_TOKEN"
     data-region="barcelona"
     data-date="today"
>
    <a :href="text.link"><h3>{{text.title}}</h3></a>
    <ul>
        <li>Date: {{text.date}}</li>
        <li>Avoid crowds score: {{text.avoid_crowds_score}}</li>
        <li>Total cruise passengers: {{text.total_cruise_passengers}}</li>
        <li>Total cruise crew: {{text.total_cruise_crew}}</li>
        <li>Ships in port: <span v-html="text.ships_in_port"></span></li>
        <li>Local public holiday: <span v-html="text.local_public_holiday"></span></li>
        <li>Local school vacation: <span v-html="text.local_school_vacation"></span></li>
        <li>Local events: <span v-html="text.local_events"></span></li>
        <li>Vacations: {{text.vacations}}</li>
    </ul>
</div>
<script src="https://avoid-crowds.dev/js/widget.js"></script>
<script>buildAvoidCrowdsWidget('#barcelona_today');</script>

{{text.title}}
  • Date: {{text.date}}
  • Avoid crowds score: {{text.avoid_crowds_score}}
  • Total cruise passengers: {{text.total_cruise_passengers}}
  • Total cruise crew: {{text.total_cruise_crew}}
  • Ships in port:
  • Local public holiday:
  • Local school vacation:
  • Local events:
  • Vacations: {{text.vacations}}

We believe, that’s easy. In the next example we are adding our chart widget. For example, we want to show your users the “amsterdam” crowd chart for the next seven days starting today. To make it easy for you, the data format is again relative. That means the displayed data changes over time. For our widget the date format should be relative. In case you don’t have any experience in coding and have no possibility to transfer dynamic data like JS params:

<div id="amsterdam_next_week"
     data-token="YOUR_TOKEN"
     data-region="barcelona"
     data-days-between="today,+6 days"
     style="text-align: center;"
>
    <p>Average crowds score for Amsterdam on next week: {{chart.average_crowds_score}}</p>
    <div id="amsterdam_next_week_chart"></div>
</div>
<script src="https://avoid-crowds.dev/js/widget.js"></script>
<script>buildAvoidCrowdsWidget('#amsterdam_next_week', '#amsterdam_next_week_chart');</script>

Average crowds score for Amsterdam on next week: {{chart.average_crowds_score}}

The last example. This time we will make a combined widget. We are combining the text and chart widget. With ‘london’ as our destination, we are displaying data for London while adding a dynamic chart for the entire month. This is very similar to how we display on our own website:

<div id="london_widget"
     data-token="YOUR_TOKEN"
     data-region="london"
     data-date="today"
     data-days-between="first day of this month,last day of this month"
>
    <a :href="text.link"><h3>{{text.title}}</h3></a>
    <ul>
        <li>Date: {{text.date}}</li>
        <li>Avoid crowds score: {{text.avoid_crowds_score}}</li>
        <li>Total cruise passengers: {{text.total_cruise_passengers}}</li>
        <li>Total cruise crew: {{text.total_cruise_crew}}</li>
        <li>Ships in port: <span v-html="text.ships_in_port"></span></li>
        <li>Local public holiday: <span v-html="text.local_public_holiday"></span></li>
        <li>Local school vacation: <span v-html="text.local_school_vacation"></span></li>
        <li>Local events: <span v-html="text.local_events"></span></li>
        <li>Vacations: {{text.vacations}}</li>
    </ul>

    <div id="london_chart"></div>
    <div>
        Average crowd score: {{chart.average_crowds_score}}
    </div>
</div>

<script src="https://avoid-crowds.dev/js/widget.js"></script>
<script>
    buildAvoidCrowdsWidget('#london_widget', '#london_chart');
</script>

{{text.title}}
  • Date: {{text.date}}
  • Avoid crowds score: {{text.avoid_crowds_score}}
  • Total cruise passengers: {{text.total_cruise_passengers}}
  • Total cruise crew: {{text.total_cruise_crew}}
  • Ships in port:
  • Local public holiday:
  • Local school vacation:
  • Local events:
  • Vacations: {{text.vacations}}
Average crowd score: {{chart.average_crowds_score}}

Summary

Anyone with some experience in coding, should be able to use our widgets without any problem. Our widgets are designed to be fully flexible. You can change the look and feel at all times. For a full API integration, please visit our developers website. If you need help, please let us know through our contact form.