> For the complete documentation index, see [llms.txt](https://support.ninchat.com/ninchat-support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.ninchat.com/ninchat-support/julkiset-ryhmakeskustelut/ryhmakeskustelun-upottaminen-web-sivustolle.md).

# Ryhmäkeskustelun upottaminen web-sivustolle

Julkisen ryhmäkeskustelun sijoittaminen onnistuu web-sivustolle, mobiilisivustolle ja -aplikaatioon, blogiin tai Facebook-sivulle.

## Chatin upotuskoodi (embed-koodi)

Upottamista varten toimitamme teille ns. upotuskoodin, kun chat on valmiina. Muokkaamme ja valmistelemme chatin valmiiksi haluamallanne tavalla; teidän tehtäväksenne jää sijoittaa upotuskoodi sivustolle.

Julkinen ryhmäkeskustelu sijoitetaan yleensä osaksi web-sivun sisältöä, sen sekaan esimerkiksi div-elementtiin. Tarvitset upottamista varten 1) raamielementin (container) oikealla tunniste-ID:llä 2) upotus-script-tägin. Upotuskoodi on yhden rivin mittainen Javascript-tägi (toimitamme teille oman koodinne). 

Asiakkaan tai hänen sivustonsa kehittäjän tulee sijoittaa nämä koodipätkät sivustolle.

Container-elementin tyyli, sijainti ja koko on täysin teidän päätettävissänne. Oheisessa esimerkissä lyhyt esimerkkityyli (style) ja esimerkki-upotuskoodi.

```markup
<div id="ninchat-groupchat-container" style="width: 100%; height: 500px; border: solid 1px #000;"></div>
...
<script src="http://ninchat.com/[...]/ninchat-public-init.js" charset="UTF-8"></script>
```

### Upotuskoodin sijoittaminen

Container-elementti sijoitetaan haluttuun kohtaan ja tyylitellään halutulla tavalla. Avustamme tyylittelyssä tarvittaessa.\
Embed-script-tägin suosittelemme sijoittamaan web-sivun body-elementin loppuun. Esim:

```markup
        <section id="groupchat" class="page-section">
           <!-- Ninchat-ryhmäkeskusteluelementti -->
           <div id="ninchat-groupchat-container"></div>
        </section>
        ...
        <!-- Ninchat-upotus-script -->
        <script src="http://ninchat.com/[...]/ninchat-init.js" charset="UTF-8"></script>
    </body>
</html>
```

{% hint style="info" %}
Mikäli sivustolla käytetään sekä yksityistä asiakaspalvelu-chattia että julkista ryhmäkeskustelua, ne tulee käynnistää samalla upotus-script-tagilla. Samalla sivulla ei voi olla useaa upotuskoodia, muuten chattien toiminta menee sekaisin.
{% endhint %}

## Mitä asiakkaan tulee selvittää <a href="#mita-asiakkaan-tulee-selvittaa" id="mita-asiakkaan-tulee-selvittaa"></a>

* Mille sivu(i)lle ryhmä-chat tulee ja käytetäänkö samalla sivulla yksityistä asiakaspalvelu-chattia?
* Sijoitetaanko ryhmäkeskustelu osaksi sivun sisältöä, vai kelluvaan ikkunaan?
* Mitä tapahtuu kun ryhmäkanava on suljettu; piilotetaanko keskusteluhistoria vai jätetäänkö se näkyville, näytetäänkö tilalla ainoastaan Suljettu-ilmoitus, piilotetaanko koko ikkuna näkyvistä?

###


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://support.ninchat.com/ninchat-support/julkiset-ryhmakeskustelut/ryhmakeskustelun-upottaminen-web-sivustolle.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.