# Use and configuration

To use a component it needs to be loaded in your page.

A basic setup could look like this:

```
<!-- load react -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<!-- load openstad component -->
<link rel="stylesheet" type="text/css" href="/components/dist/css/choices-guide.css"/>
<script src="/components/dist/choices-guide.js"></script>
<script>

 window.addEventListener('load', function(e) {

   // configure
   var config = {
     divId: "choices-guide",
     siteId: 1,
     choicesGuideId: 1,
     api: {
       "url": "https://api.openstad.yourdomain.nl",
     },
   };

   // load in page
   var element = document.querySelector('.openstad-component-choices-guide');
   OpenStadComponents['choices-guide'].ChoicesGuide.renderElement(element, config);

 });

</script>

<!-- container div -->
<div class="openstad-component-choices-guide"></div>
```

## Configuration

All elements need information about the openstad-ecosystem API server they should use.

```
{
  api: {
    url: "API_URL",
  }
}
```

User login is assumed to be handled by the containing website; information about the user should be passed in the config.

```
{
  user: {
    fullName: "Niels Vegter",
    role: "admin"
  },
  api: {
    url: "API_URL",
    isUserLoggedIn: true,
    headers: {
      "X-Authorization": "Bearer JWT"
    }
  }
}
```

All elements need basic information about their context.

```
{
  divId: "choices-guide",
  siteId: 1,
}
```

More specific information per component can be found in the per-component documentation and in the examples.

## Examples

The *examples* directory should be helpful.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openstad.org/openstad/technical/components/use.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.