Interface Integration

Anyone can integrate Treind's Widget into their website

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:

Code Snippet

<head>
    <!-- Other head elements -->
    <!-- Triend Widget CSS -->
    <link rel="stylesheet"
href="https://plugin.triend.io/static/css/main.css">
</head>

  1. 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>

PreviousdAppNextAI Insights Hub

Last updated