# Interface Integration

The base URL of the triend widget is “<https://plugin.triend.io/static/js/main.js?v=0.5”>. You need to wrap this link in the script tag with companyUid and TriendKey.

**How to integrate widget into your website**

1. Add CSS link in the tags

To integrate the Triend widget into your website, follow these steps:

<table data-header-hidden><thead><tr><th></th></tr></thead><tbody><tr><td>Code Snippet</td></tr><tr><td><pre><code>&#x3C;head>
    &#x3C;!-- Other head elements -->
</code></pre><pre><code>    &#x3C;!-- Triend Widget CSS -->
</code></pre><pre><code>    &#x3C;link rel="stylesheet"
href="https://plugin.triend.io/static/css/main.css">
&#x3C;/head>
</code></pre></td></tr></tbody></table>

2. **Add Script at the end of the tag**

```
<body>
    <!-- Your website content -->
```

```
    <!-- Triend Widget Script -->
```

```
    <script type="text/javascript"
src="https://plugin.triend.io/static/js/main.js?v=0.5"
triendKey="67890"
companyUid="327261d8-a61b-406d-a2c0-3e5387ddc0ad"></script>
</body>
```

Ensure that the CSS link is placed within the \<head> tags, and the script is placed just before the closing \</body> tag. This helps ensure that your website content is loaded before the widget script runs.

Make sure to replace the placeholder values in the script (triendKey and company UID) with the actual values you generated. This will allow the widget to connect to the correct Triend account.

**Style your widget**

```
<head>
    <!-- Other head elements -->
```

```
    <!-- Triend Widget CSS -->
```

```
    <link rel="stylesheet"
href="https://plugin.triend.io/static/css/main.css?v=0.5">
```

```
    <!-- Custom CSS for Widget Color →
```

```
    <!-- IT IS IMPORTANT THAT TRIEND STYLE TAG IS RIGHT BEFORE THE
</HEAD> -->
```

```
    <style>
        :root {
```

```
            --triend-bg-color: #f78536 !important;
            --triend-color: white !important;
            --triend-button-bg: white !important;
            --triend-button-color: black !important;
```

} \</style>

\</head>


---

# 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://triend.gitbook.io/triend-docs-and-litepaper/ecosystem/dapp/interface-integration.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.
