--- title: How to integrate our widget into your website description: This documentation provides instructions on how to integrate Customer Alliance Widget JavaScript into your website. You can generate your widget code yourself right on our platform. In the Styling Set --- [Skip to content](https://support.customer-alliance.com/en/knowledge-base/how-to-integrate-our-widget-into-your-website-1#main-content) [More support](https://support.customer-alliance.com/en/knowledge-base/kb-tickets/new?hsLang=en) [Customer portal](https://support.customer-alliance.com/tickets-view?hsLang=en) ![Customer-Alliance-Horizontal-logo-on-light (2)](https://support.customer-alliance.com/hs-fs/hubfs/Customer-Alliance-Horizontal-logo-on-light%20(2).png?width=260&height=260&name=Customer-Alliance-Horizontal-logo-on-light%20(2).png) Open main navigation Close main navigation - [More support](https://support.customer-alliance.com/en/knowledge-base/kb-tickets/new) - [Customer portal](https://support.customer-alliance.com/tickets-view) Hello. How can we help you? - There are no suggestions because the search field is empty. 1. [Support knowledge base](https://support.customer-alliance.com/en/knowledge-base?hsLang=en) 2. [English](https://support.customer-alliance.com/en/knowledge-base/english?hsLang=en) 3. [Settings](https://support.customer-alliance.com/en/knowledge-base/english?hsLang=en#settings) # How to integrate our widget into your website This documentation provides instructions on how to integrate Customer Alliance Widget JavaScript into your website. ![](https://support.customer-alliance.com/hubfs/Knowledge%20Base%20Import/lh7-us.googleusercontent.comQnWX1eGBu8EYYzxxeeznJDL0cSXXD5QJ0WR5A3zartlHucGYFyCTXxaxjvBKoVVer_yrgnIXTsLccW_uxhx7uIB1mIv4FvZ_xYzSOwtbj8E4WbrkTHY3Ew1Z.png) ### Generating widget code You can generate your widget code yourself right on our platform. In the Styling Settings section look out for Certificate & Widget page. There should be a button available to generate widget code. If you can not find it, please reach out to our Customer Support. Once you click that button, you should be able to see a similar window: ![](https://support.customer-alliance.com/hubfs/Knowledge%20Base%20Import/lh7-us.googleusercontent.com2hKJ4LBqeU1AynD0nkmm99kKcASdrghwH5q2RVTGje3ljZ8e1EYBbMe-hLdoP-_kWlWbFaxGchXjwVVRKruagIyZi3G-PkHcy7t7xB58-jy5L9D8ZyqSIPxK.png) ### Embedding the widget The widget is embedded via JavaScript, defining it in the \ section of the html document. When loaded the widget appends html code to the html dom. The widget is placed in an absolute position. The placement and looks are determined by the configuration, given in the Customer Alliance application backend. The widget URL is specified in the backend widget settings section. ![](https://support.customer-alliance.com/hubfs/Knowledge%20Base%20Import/lh7-us.googleusercontent.comzcKwnb40aMEzf_t1poLnNmHeECyrhQzshnjnOIaHydFYIvCn1dijD3L_TQRMYUEDChAA04xcmEmnUlC5gRNqh4OaEmR83112TFP1DWWGdb3YYVttRcj8PH8Q.png) ### Embedding the widget within a given container It is possible to place the widget in a relative position. For this, a container with the id ca-widget-container needs to exist in the html dom. ![](https://support.customer-alliance.com/hubfs/Knowledge%20Base%20Import/lh7-us.googleusercontent.com0lFxOsZsTY_QKpCGS53ra-lhmKIDb_Eng7KJ-azcx5sfr8M6O2lP-b6vvwNGUdSIb0m-PZ1PMwJ4xIo0Kpao8Wp_dwCWOW7Xrj4qVlJ6xkGzdIVjUgQFiGWU.png) Afterward, the widget loads the html into the container div. This enables a custom placement of the widget on the website. ### Mobile version The widget is responsive. Tor tablet and mobile screen sizes, the mobile version of the widget will be shown. In order to force widget mobile version - the following HTML code example can be used. ![](https://support.customer-alliance.com/hubfs/Knowledge%20Base%20Import/lh7-us.googleusercontent.comni0fvH4IoKd_8soVNb8j_gWnWZDcg_PY1dOf3n6ph8jVR3aTT5_64Q1S4pi3BCSOpTgKVqjStPC4GatPcwBwQz3x-Nqw_yK7OskErZSWQl53V-Q39pvKkYFF.png) Inside e.html just the widget code should be placed. ![](https://support.customer-alliance.com/hubfs/Knowledge%20Base%20Import/lh7-us.googleusercontent.com7Fg6qER2vojRK8_LQB-yJqlbzhU0LqPHD1bCXlBjRFHZ-GhjzG1uJpcO-UOB6urnzqH7-JjWBysaUdMu0jZDDOzpwz9kpBlWT8WCi2kgNajlyTLCZaEezxoH.png)Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.Yes No No results found - [English](https://support.customer-alliance.com/en/knowledge-base/english?hsLang=en#main-content) - [Customer Alliance Academy](https://support.customer-alliance.com/en/knowledge-base/english?hsLang=en#customer-alliance-academy) - [Dashboard](https://support.customer-alliance.com/en/knowledge-base/english?hsLang=en#dashboard) - [AI Hub](https://support.customer-alliance.com/en/knowledge-base/english?hsLang=en#ai-hub) - [Analytics 360](https://support.customer-alliance.com/en/knowledge-base/english?hsLang=en#analytics-360) - [Communication](https://support.customer-alliance.com/en/knowledge-base/english?hsLang=en#communication) - [Reviews](https://support.customer-alliance.com/en/knowledge-base/english?hsLang=en#reviews) - [Reports](https://support.customer-alliance.com/en/knowledge-base/english?hsLang=en#reports) - [Define & Track](https://support.customer-alliance.com/en/knowledge-base/english?hsLang=en#define-track) - [Settings](https://support.customer-alliance.com/en/knowledge-base/english?hsLang=en#settings) - [User settings](https://support.customer-alliance.com/en/knowledge-base/english?hsLang=en#user-settings) - [Deutsch](https://support.customer-alliance.com/en/knowledge-base/deutsch?hsLang=en#main-content) - [Customer Alliance Akademie](https://support.customer-alliance.com/en/knowledge-base/deutsch?hsLang=en#customer-alliance-akademie) - [AI Reply 2.0 FAQ's](https://support.customer-alliance.com/en/knowledge-base/deutsch?hsLang=en#ai-reply-2-0-faqs) - [Dashboard](https://support.customer-alliance.com/en/knowledge-base/deutsch?hsLang=en#dashboard) - [Analyse 360](https://support.customer-alliance.com/en/knowledge-base/deutsch?hsLang=en#analyse-360) - [Kommunikation](https://support.customer-alliance.com/en/knowledge-base/deutsch?hsLang=en#kommunikation) - [Bewertungen](https://support.customer-alliance.com/en/knowledge-base/deutsch?hsLang=en#bewertungen) - [Reports](https://support.customer-alliance.com/en/knowledge-base/deutsch?hsLang=en#reports) - [Definieren & Verfolgen](https://support.customer-alliance.com/en/knowledge-base/deutsch?hsLang=en#definieren-verfolgen) - [Einstellungen](https://support.customer-alliance.com/en/knowledge-base/deutsch?hsLang=en#einstellungen) - [Benutzereinstellungen](https://support.customer-alliance.com/en/knowledge-base/deutsch?hsLang=en#benutzereinstellungen) - [Français](https://support.customer-alliance.com/en/knowledge-base/fran%C3%A7ais?hsLang=en#main-content) - [Customer Alliance Academy](https://support.customer-alliance.com/en/knowledge-base/fran%C3%A7ais?hsLang=en#customer-alliance-academy) - [AI Reply 2.0 FAQ's](https://support.customer-alliance.com/en/knowledge-base/fran%C3%A7ais?hsLang=en#ai-reply-2-0-faqs) - [Dashboard](https://support.customer-alliance.com/en/knowledge-base/fran%C3%A7ais?hsLang=en#dashboard) - [Analyze 360](https://support.customer-alliance.com/en/knowledge-base/fran%C3%A7ais?hsLang=en#analyze-360) - [Communication](https://support.customer-alliance.com/en/knowledge-base/fran%C3%A7ais?hsLang=en#communication) - [Avis](https://support.customer-alliance.com/en/knowledge-base/fran%C3%A7ais?hsLang=en#avis) - [Rapport](https://support.customer-alliance.com/en/knowledge-base/fran%C3%A7ais?hsLang=en#rapport) - [Définir & suivre](https://support.customer-alliance.com/en/knowledge-base/fran%C3%A7ais?hsLang=en#d%C3%A9finir-suivre) - [Configuration](https://support.customer-alliance.com/en/knowledge-base/fran%C3%A7ais?hsLang=en#configuration) - [Paramètres utilisateur](https://support.customer-alliance.com/en/knowledge-base/fran%C3%A7ais?hsLang=en#param%C3%A8tres-utilisateur) - [Italiano](https://support.customer-alliance.com/en/knowledge-base/italiano?hsLang=en#main-content) - [Accademia dell Customer Alliance](https://support.customer-alliance.com/en/knowledge-base/italiano?hsLang=en#accademia-dell-customer-alliance) - [AI Reply 2.0 FAQ's](https://support.customer-alliance.com/en/knowledge-base/italiano?hsLang=en#ai-reply-2-0-faqs) - [Dashboard](https://support.customer-alliance.com/en/knowledge-base/italiano?hsLang=en#dashboard) - [Analisi 360](https://support.customer-alliance.com/en/knowledge-base/italiano?hsLang=en#analisi-360) - [Communication](https://support.customer-alliance.com/en/knowledge-base/italiano?hsLang=en#communication) - [Recensioni](https://support.customer-alliance.com/en/knowledge-base/italiano?hsLang=en#recensioni) - [Report](https://support.customer-alliance.com/en/knowledge-base/italiano?hsLang=en#report) - [Definisci e traccia](https://support.customer-alliance.com/en/knowledge-base/italiano?hsLang=en#definisci-e-traccia) - [Impostazioni](https://support.customer-alliance.com/en/knowledge-base/italiano?hsLang=en#impostazioni) - [Impostazioni utente](https://support.customer-alliance.com/en/knowledge-base/italiano?hsLang=en#impostazioni-utente) - [Español](https://support.customer-alliance.com/en/knowledge-base/espa%C3%B1ol?hsLang=en#main-content) - [Academia de la Customer Alliance](https://support.customer-alliance.com/en/knowledge-base/espa%C3%B1ol?hsLang=en#academia-de-la-customer-alliance) - [AI Reply 2.0 FAQ's](https://support.customer-alliance.com/en/knowledge-base/espa%C3%B1ol?hsLang=en#ai-reply-2-0-faqs) - [Polski](https://support.customer-alliance.com/en/knowledge-base/polski?hsLang=en) - [AI features](https://support.customer-alliance.com/en/knowledge-base/ai-features?hsLang=en) - [Customer Alliance Academy](https://support.customer-alliance.com/en/knowledge-base/customer-alliance-academy?hsLang=en) - [Dashboard](https://support.customer-alliance.com/en/knowledge-base/dashboard?hsLang=en) - [Communication](https://support.customer-alliance.com/en/knowledge-base/communication?hsLang=en) - [Analytics 360](https://support.customer-alliance.com/en/knowledge-base/analytics-360?hsLang=en) - [Reviews](https://support.customer-alliance.com/en/knowledge-base/reviews?hsLang=en) - [Reports](https://support.customer-alliance.com/en/knowledge-base/reports?hsLang=en) - [Define & Track](https://support.customer-alliance.com/en/knowledge-base/define-track?hsLang=en) - [Settings](https://support.customer-alliance.com/en/knowledge-base/settings?hsLang=en) - [User settings](https://support.customer-alliance.com/en/knowledge-base/user-settings?hsLang=en) - [Italiano (1)](https://support.customer-alliance.com/en/knowledge-base/italiano-1?hsLang=en) - [Ticket Listing](https://support.customer-alliance.com/tickets-view) - [Support Knowledge Base](https://support.customer-alliance.com/en/knowledge-base) - [Sign Out](https://support.customer-alliance.com/_hcms/mem/logout) [![Customer-Alliance-Horizontal-logo-on-light (2)-2](https://support.customer-alliance.com/hs-fs/hubfs/Customer-Alliance-Horizontal-logo-on-light%20(2)-2.png?width=117&height=117&name=Customer-Alliance-Horizontal-logo-on-light%20(2)-2.png "Customer-Alliance-Horizontal-logo-on-light (2)-2")](https://www.customer-alliance.com/en/) Copyright © 2025, CA Customer Alliance GmbH