> For the complete documentation index, see [llms.txt](https://api.beacon.li/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://api.beacon.li/native-routing-in-beacon/vanilla-js-native-routing-example.md).

# Vanilla JS - Native Routing Example

#### Implementing Native Routing with `@beacon.li/bar` in Vanilla JS

If you're using the `@beacon.li/bar` package in a Vanilla JavaScript environment and you want to integrate native routing, you can achieve this by using the `Beacon.setRouter` method. This method allows you to define custom logic for handling routing events and updating the beacon widget's behavior accordingly.

#### Setting up the Router

To implement native routing, follow these steps:

1. Import the `Beacon` module from the `@beacon.li/bar` package as you normally would:<br>

   ```javascript
   import { Beacon } from '@beacon.li/bar';
   ```
2. Use the `Beacon.setRouter` method to define your routing logic. This method takes a callback function as its parameter, where you can specify how the Beacon widget should behave based on the current URL:<br>

   ```
   Beacon.setRouter(url => {
       // your logic here
   });
   ```

#### Custom Routing Logic

Inside the callback function passed to `Beacon.setRouter`, you can implement your custom routing logic. Depending on your application's requirements, you may want to:

* Show or hide the Beacon widget based on the URL.
* Perform any other actions based on the URL.

Here's a simple example that shows how to conditionally open or close the Beacon widget based on the URL:

```
Beacon.setRouter(url => {
    if (url === '/contact') {
        Beacon.open(); // Show Beacon widget on the 'contact' page.
    } else {
        Beacon.close(); // Hide Beacon widget on other pages.
    }
});
```

By setting up the `Beacon.setRouter` method with your custom routing logic, you can integrate the Beacon widget seamlessly into your application's navigation flow, ensuring a smooth user experience.