npm package: @geotrekce/geotrek-rando-widget
Description: Geotrek web components
Author: bastien.alvez@makina-corpus.com
Latest version: 0.31.0

<h1 align="center">Geotrek-rando-widget</h1>

<p align="center"><img alt="geotrek widget image" src="/docs/public/assets/geotrek-widget.png"></p>

<p align="center">
<a href="https://geotrek-rando-widget.readthedocs.io/stable/documentation/introduction/overview.html" rel="nofollow"><img alt="Documentation" src="https://img.shields.io/badge/Documentation-green.svg" style="max-width:100%;"></a>
<a href="https://demo-rando-widget.geotrek.fr/" rel="nofollow"><img alt="Geotrek Widget demo" src="https://img.shields.io/badge/Demo-purple.svg" style="max-width:100%;"></a>
<a href="https://matrix.to/#/%23geotrek:matrix.org" rel="nofollow"><img alt="Chat Matrix" src="https://img.shields.io/badge/Chat-blue.svg" style="max-width:100%;"></a>
<a href="https://groups.google.com/g/geotrek-fr" rel="nofollow"><img alt="Forum Google Group" src="https://img.shields.io/badge/Forum-brightgreen.svg" style="max-width:100%;"></a>
<a href="https://github.com/GeotrekCE/Geotrek-rando-widget/releases/latest" rel="nofollow"><img alt="Release" src="https://img.shields.io/github/release/GeotrekCE/Geotrek-rando-widget.svg" style="max-width:100%;"></a>
</p>

<p align="center">
<a href="https://github.com/GeotrekCE/Geotrek-rando-widget/actions/workflows/ci.yml" rel="nofollow"><img alt="Release" src="https://github.com/GeotrekCE/Geotrek-rando-widget/actions/workflows/ci.yml/badge.svg" style="max-width:100%;"></a>
</p>

<p align="center">
    <a href="#widget"><b>Widget</b></a>  •  
    <a href="#features"><b>Features</b></a>  • 
    <a href="#test-and-configure-the-widget"><b>Configuration</b></a>  • 
    <a href="#documentation"><b>Documentation</b></a>  •      
</p>
<p align="center">  
    <a href="#support"><b>Support</b></a>  •   
    <a href="#contribution"><b>Contribution</b></a>  •  
    <a href="#thanks-to-all-contributors-"><b>Contributors</b></a>  •  
    <a href="#license"><b>License</b></a>  • 
</p>

![Search](/docs/public/assets/demo.jpg)

## Widget

**Geotrek-rando-widget** is an intuitive module in the Geotrek suite designed for embedding interactive geographic content on any website. Perfect for tourist offices, natural parks, and organizations promoting a territory, the widget is as simple to embed as a YouTube video.

Geotrek Rando Widget provides a flexible, lightweight solution for integrating [Geotrek-admin](https://github.com/GeotrekCE/Geotrek-admin) data on your website without needing a dedicated platform like [Geotrek-rando](https://github.com/GeotrekCE/Geotrek-rando-v3).

### Test and configure the widget

Explore the widget and its configuration options here: [Widget builder](https://geotrekce.github.io/Geotrek-rando-widget/)

### Examples of Geotrek-widget's integration

- [Walks and Hikes in Sidobre & Valleys, Tarn](https://sidobre-vallees-tourisme.com/type_activite/balades-et-randonnees-sidobre-vallees/)
- [Hiking in Haut Jura Saint-Claude](https://www.haut-jura-saint-claude.com/pause-aventure/randonnee-haut-jura/)
- [Cycling Trails in Coeur du Jura](https://www.coeurdujura-tourisme.com/parcours-randonnees-velo/)
- [Walks and Hikes in Occitanie](https://www.la-toscane-occitane.com/activites/balades-randonnees/)

![Examples](/docs/public/assets/examples.jpg)

## Features

With a mobile-responsive design, multilingual support, and customizable components, **Geotrek-rando-widget** enables websites to dynamically present treks, activities, services, and events, complete with multilingual support, advanced filtering, and detailed information pages—all easily customizable to suit any site’s needs. Key features include:

- **Web component**: geotrek-rando-widget is a web component that can be easily embedded on any website.
- **Responsive design**: it adapts to different screen sizes, providing an optimal display on desktop, tablet, and mobile devices.
- **Geotrek-admin API v2**: retrieves data in real-time via the Geotrek-admin API.
- **Flexible configuration**: easily customizable and integrable into any website.
- **Multi-language support**: displays content in multiple languages (e.g. english, spanish) if translations are available in Geotrek-admin.
- **Advanced filtering and search**: allows users to filter and search objects in a list view with precision.
- **Detailed list view**: shows published objects (treks, services, tourist events, etc.) with a main photo, name, and key features (difficulty, distance, elevation gain).
- **Detailed object page**: provides a complete view of an object with all textual details (POI, sensitive areas, recommendations, etc.) configured in Geotrek-admin.
- **Download options**: users can download GPX/KML route files and a PDF version of the detailed page.
- **Easy sharing**: users can copy and share the URL of a detailed object page.

## Documentation

For detailed setup and examples, visit the documentation:
- [Overview](https://geotrek-rando-widget.readthedocs.io/stable/documentation/introduction/overview.html)
- [Get started](https://geotrek-rando-widget.readthedocs.io/stable/documentation/introduction/get-started.html)

## Support

Have questions or feedback? Connect with our community:
- Report issues or suggest features by [submitting a ticket](https://github.com/GeotrekCE/Geotrek-rando-widget/issues).
- Join discussions on [Matrix](https://matrix.to/#/%23geotrek:matrix.org) or exchange insights in our [Google Group](https://groups.google.com/g/geotrek-fr).

## Contribution

Interested in contributing? Check out our [Contributing Guide](https://geotrek-rando-widget.readthedocs.io/stable/documentation/contribution/development.html). All types of contributions are welcome—even if you’re not a coder!

## Thanks to all contributors ❤

<a href="https://github.com/GeotrekCE/Geotrek-rando-widget/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=GeotrekCE/Geotrek-rando-widget" />
</a>

Made with [contrib.rocks](https://contrib.rocks).

## License

This project is under the MIT License. See the [LICENSE](https://github.com/GeotrekCE/Geotrek-rando-widget/blob/main/LICENSE) for details.

<a href="https://territoires.makina-corpus.com/"><img src="https://geotrek.fr/assets/img/logo_makina.svg" alt="Logo MCT" width="115"></a>
[![](https://geotrek.fr/assets/img/logo_autonomens-h120m.png)](https://datatheca.com/)