Integration via script implementation
Learn how to integrate your website with the User.com app via simple script implementation
What are the available integration methods?
We offer a variety of plugins that automatically synchronize our clients' data with the User.com app. Additionally, we provide a manual integration method that involves implementing a widget script directly into your web page's source code.
Please visit this link to explore all the integration options available to you, or find them in the app under 'Settings' -> 'Setup & Integrations'.
If you choose not to use any of the available integrations, you will need to implement our script to connect your website with the User.com app.
How to perform the simple integration via script?
1. As a first step, decide how you are going to implement the script. It must be added to the source code of your web page, and there are several ways to accomplish this. You can either directly insert the script into the code or use a tag manager, such as Google Tag Manager.
2. In your User.com app, go to 'Settings' -> 'Setup & Integrations'.
3. In 'Setup methods' section, click on 'Basic integration'.
4. A popup will appear. Copy the first script (the second, more advanced version, will be explained later in this article).
5. The script looks similar to the one below:
<script data-cfasync="false" type="text/javascript"> window.civchat = { apiKey: "your_APIkey", }; </script> <script data-cfasync="false" type="text/javascript" src="https://your_domain.user.com/widget.js"></script>
The script copied from your app will already contain your apiKey and your User.com app domain.
6. Now, insert the script to your webpage source code:
if adding it directly to the code, paste it before the closing </body> tag of your website,
if using a tag manager, ensure you set a proper trigger so the script fires on all pages of your website.
7. Hide the chat widget, if you're not planning to use this feature right away:
go to 'Settings' -> 'Chat Widget Settings',
in 'Widget visibility' section, select 'Widget state' -> 'Hidden'
How to check if the script is added correctly?
Once the script is implemented, it's important to ensure that it functions correctly. The script generates a unique "user_key" for each new visitor and stores it, along with a cookie, in the visitor's browser.
1. The first sign that the script is operational will be the tracking of visits within your User.com app.
Navigate to 'Data' -> 'People' section. Each cookie generated in a visitor's browser will create a new, initially anonymous record in your database. These records will be assigned random names, indicating successful tracking:
2. Another method to verify the script's proper loading involves using the browser's Console tab:
open your website,
right-click and select 'Inspect',
navigate to 'Console' tab,
type 'civchat' and press enter.
If this command returns apiKey and userKey values, your script is working correctly. If not, refresh the page and try again. It's possible that the cookie was just generated and may not return with the initial visit.
How to pass more complex user data to your User.com app?
Our basic script automatically fetches data from visitors' browsers, such as Country, Device, Browser, and Browser Language, and saves this information as user attributes.
If you wish to identify your page users with more detailed data passed from your website, you'll need to expand the range of data passed in the initial script.
You can add additional data to the window.civchat object included in the script to update your user attributes. Below, you can find an example of the prefilled values of these attributes. Remember, these are static values just for example purposes. In a real-life scenario, you can use your GTM variables as a value of certain attributes or dynamically pass them with JavaScript:
<script data-cfasync="false"> window.civchat = { apiKey: "your_apiKey", name: "John Doe", user_id: "idfromyourdatabase", email: "myemail@example.org", gender: 2, status: 2, date_attr: "2017-07-25T14:14:08.612Z", // Must be a valid ISO 8601 format phone_number: "+44754123434", // Must be a valid E.164 format score: 0, company: { name: "My Company", company_id: "idfromyourdatabase", revenue: "$239.9 billion" } }; </script> <script data-cfasync="false" src="https://your_domain.user.com/widget.js"></script>
For better understanding on the functionality of User ID and Company ID, please refer to this article.