# Installation

### CSS

The style sheet for the talque plugin should be in the loaded in the `<head>` of the page:

```markup
<link rel="stylesheet" href="https://event.talque.com/talque-js-plugin.css"/>
```

Alternatively, the stylesheet link can also be placed in the body of the page but above the content snippet (see below).

### Javascript

The javascript code of the talque plugin is ideally loaded asynchronously, so the initial render of your web page during load happens as soon as possible. For this, place the following in the `<body>` of your page:

```markup
<script 
    async defer type="text/javascript" 
    src="https://event.talque.com/lib/talque-js-plugin.js">
</script>
```

Alternatively, for example if you use a content management that does not support asynchronous loading of resources, you can also place the above in the `<head>` of your page.

### Content

The position of the content is determined by the css id `talque-js-plugin`, which requires a few `data-` attributes to configure what to show and how to present it. For example:

```markup
<div
    id="talque-js-plugin"
    data-org-id="qRY08MFxsIo97DecfEPk"
    data-locale="DE_DE"
    data-backend="https://event.talque.com"
    data-settings="{}"
    data-site-url="/path/to/js-plugin">
</div>
```

The meaning of the data attributes is as follows:&#x20;

* `data-org-id` is the organization id of your event
* `data-locale` determines language on labels and date formats. The currently supported values are listed in the [Locale](/public/json-api/enumerations/locale.md) section
* `data-backend` should always be `https://event.talque.com`
* `data-settings` allows you to customize the display
* `data-site-url` is the relative route (excluding the hostname) of where the plugin is being served. In the [Routing](/public/javascript-plugin/routing.md) section this is described in more detail.

### Complete Example

Here is a minimal example that demonstrates where the different elements should be placed

```markup
<html>
    <head>
        <link rel="stylesheet" href="https://event.talque.com/talque-js-plugin.css"/>
    </head>
    <body>
        <h1>Welcome to my test page!</h1>
        <div
            id="talque-js-plugin"
            data-org-id="qRY08MFxsIo97DecfEPk"
            data-locale="DE_DE"
            data-backend="https://event.talque.com"
            data-settings="{}"
            data-site-url="/path/to/js-plugin">
        </div>
        <script 
            async defer type="text/javascript" 
            src="https://event.talque.com/lib/talque-js-plugin.js">
        </script>
    </body>
</html>
```


---

# 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://talque.gitbook.io/public/javascript-plugin/installation.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.
