> For the complete documentation index, see [llms.txt](https://supportiko.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://supportiko.gitbook.io/documentation/getting-started/export.md).

# Export

The Export page in Supportiko provides the necessary code to integrate your chat widget into your website. Whether you're using a simple HTML page or a popular platform, this guide will help you implement the widget seamlessly. If you encounter any issues, our support team is here to assist.

<figure><img src="/files/k64OTsZL68RzoJpGBipg" alt=""><figcaption></figcaption></figure>

### Implementing Your Chat Widget

Supportiko supports a wide range of platforms to ensure compatibility with your website. Choose your platform from the dropdown menu:

* **Simple HTML Page**
* **WordPress**
* **Shopify**
* **Wix**
* **Squarespace**
* **Next.js**
* **Webflow**
* **Magento (Adobe Commerce)**
* **WooCommerce**
* **Vue.js**
* **React**

Select the platform that matches your website to generate the appropriate implementation code.

**Implementation Steps**

1. **Configure Your Widget Settings**: Go to the Widget Settings section in the Admin Panel and customize your chat widget (e.g., title, colors, position). <mark style="color:purple;">If the widget is not set to</mark> <mark style="color:purple;"></mark><mark style="color:purple;">**Enabled**</mark> <mark style="color:purple;"></mark><mark style="color:purple;">in settings, it will not be visible on the site.</mark>
2. **Save Your Changes**: Click the **Save** button to apply your settings.
3. **Copy the Code**: On the Export page, under **Implementation Code**, you’ll see the code snippet for your selected platform. Copy the provided code (e.g., for a Simple HTML Page, the code might look like this):

```
<!-- Add this code just before the closing </body> tag -->
<supportiko-chat-widget></supportiko-chat-widget>
<script src="https://www.supportiko.com/chat-widget.js?token=5acd7c7748eabd1f1">
</script>
```

4. **Paste the Code**: Add the copied code to your website as instructed. For most platforms, this involves pasting the code just before the closing \</body> tag in your site’s HTML. If you’re using a platform like WordPress or Shopify, you may need to paste the code into a specific section of your theme or settings (e.g., a custom HTML block or footer script area).
5. **Developer Assistance**

   If you’re not comfortable editing your website’s code, you can share the generated code with your website developer. They can help you implement the widget correctly to ensure it appears on your site.

**Need Help?**

If you encounter any problems during implementation or if your platform isn’t listed, don’t hesitate to reach out to our support team. Contact us at [**info@supportiko.com**](mailto:info@supportiko.com), and we’ll assist you in getting your chat widget up and running.

By following these steps, you’ll have the Supportiko chat widget live on your website, ready to engage with your visitors and provide seamless support.


---

# 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://supportiko.gitbook.io/documentation/getting-started/export.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.