The RingQ Chat Widget enables real-time messaging between website visitors and your RingQ users, allowing conversations to be handled directly within the RingQ platform. By embedding the widget into your website, administrators can extend customer communication beyond voice while maintaining centralized control and visibility. This guide explains how to generate, configure, and add the RingQ Chat Widget to your website, ensuring it is properly deployed and ready for use.
Use the script below exactly as given (replace placeholder values with those from your RingQ WebChat configuration):
<script src="https://multi.<your-subdomain>.ringq.cloud/iframe/chat-embed.php?color=%23e5ddd5&accesstoken=<access-token>&img=https://www.ringq.com/wp-content/uploads/2023/09/cropped-RingQ-favicon-blue-Q-32×32.png&fqdn=multi.<your-subdomain>.ringq.cloud&tokenized=<tokenized>"></script>
| Part | Purpose |
|---|---|
| <script> | Loads external Javascript |
| chat-embed.php | Chat widget loader |
| color | Widget theme color |
| accesstoken | Authenticates widget |
| img | Chat icon/logo |
| fqdn | RingQ tenant domain |
| tokenized | Security & validation token |
Edit the color (`color=`) Your current value:
color=%23e5ddd5 → this means #e5ddd5To change it:
#1e90ff)# with %23Example: <script src="https://multi.<your-subdomain>.ringq.cloud/iframe/chat-embed.php?color=%231e90ff&accesstoken=<access-token>&img=<image-url>&fqdn=multi.<your-subdomain>.ringq.cloud&tokenized=<tokenized>"></script> Rule: always encode # as %23. Edit the access token (`accesstoken=`) Replace: accesstoken=<access-token> with the token value generated by RingQ for your widget. Example: accesstoken=<new-access-token> Important:
tokenized= value may also need to match (depending on how RingQ validates).Edit the image (`img=`) Replace the img= value with a public image URL. Example: img=https://yourdomain.com/images/chat-logo.png Tips:
Make sure the image URL has no spaces. If it does, it must be URL-encoded (best practice: do not use spaces in filenames). Edit the FQDN (`fqdn=`) Replace: fqdn=multi.<your-subdomain>.ringq.cloud with your target tenant domain, for example: fqdn=multi.yourcompany.ringq.cloud Important:
fqdn should match the RingQ tenant you want the widget to connect to.https://…ringq.cloud/… part).Critical note about `tokenized=` In many implementations, tokenized is tied to the access token, FQDN, and other parameters for integrity. So if you change any of these:
…your tokenized= value might no longer be valid, and the widget can fail to load. Best practice:
tokenized value using the platform’s embed generator).Open the main HTML file of your website (for example: index.html). 2. Add the script just before the closing </body> tag:
<body>
<!-- Your website content -->
<script src="https://multi.<your-subdomain>.ringq.cloud/iframe/chat-embed.php?color=%23e5ddd5&accesstoken=<access-token>&img=https://www.ringq.com/wp-content/uploads/2023/09/cropped-RingQ-favicon-blue-Q-32×32.png&fqdn=multi.<your-subdomain>.ringq.cloud&tokenized=<tokenized>"></script>
</body>
Refresh your website in the browser. 4. The chat widget should appear (usually at the bottom corner of the page).