# Chatbot

A chatbot project can be added to your app or website in 2 ways.&#x20;

1. [As a widget](#initialise-as-widget)
2. [Embedded](#embed-in-your-page)

## Initialise as widget

After[ installing the Chathive SDK](https://developers.chathive.app/sdk/getting-started), you’ll need to start up the Widget. Use the code snippet below to make sure the Widget launches every time the page is refreshed.

Place this code in the `</body>` tag on every page where you want to show the widget.

```html
<script>
    Chathive.widget.init({ apiKey: "YOUR_API_KEY" });
</script>
```

{% hint style="info" %}
**Good to know:** If you have a single page app make sure this is executed after the SDK has been loaded&#x20;
{% endhint %}

## Embed in your page

Sometimes a widget doesn't fit into your design. for these purposes we also made it possible to embed the widget into your page.

Once you’ve [installed the Chathive SDK](https://developers.chathive.app/sdk/getting-started), you’ll need to specify which HTML tag should contain the widget. Place the following code just before the `</body>` tag, making sure it comes after the HTML tag where you want to embed the widget."

```html
<script>
    Chathive.widget.embed({
        apiKey: "YOUR_API_KEY",
        selector: "html_tag_selector",
    });
</script>
```

### Example

```markup
<body>
    <div id="embedding"></div>
    <script>
        Chathive.widget.embed({
            apiKey: "YOUR_API_KEY",
            selector: "#embedding",
        });
    </script>
</body>
```

## Limitations

* Currently only 1 chatbot project can be added to your app or website.
