RingQ Customer Centric Communications

Add Widget Script


Introduction

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.

The Chat Widget Script

1

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>

PartPurpose
<script>Loads external Javascript
chat-embed.phpChat widget loader
colorWidget theme color
accesstokenAuthenticates widget
imgChat icon/logo
fqdnRingQ tenant domain
tokenizedSecurity & validation token

Customizing the Chat Widget Embed Script

Edit the color (`color=`) Your current value:

  • color=%23e5ddd5 → this means #e5ddd5

To change it:

  • Pick a hex color (example #1e90ff)
  • Replace # with %23

Example: <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:

  • The token must be a valid token generated by RingQ for that specific chat widget/configuration.
  • If you change the token, the existing 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:

  • Use HTTPS
  • Prefer PNG/SVG (if supported)
  • Keep it square (e.g., 128×128 / 256×256)

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.
  • In most cases, the base domain in the script URL should also match that tenant (the 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:

  • accesstoken
  • fqdn
  • sometimes even img / color

…your tokenized= value might no longer be valid, and the widget can fail to load. Best practice:

  • Generate a fresh embed script from RingQ after changes (or regenerate the tokenized value using the platform’s embed generator).

Adding the Script to a Plain HTML Website

1

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>

3

Refresh your website in the browser. 4. The chat widget should appear (usually at the bottom corner of the page).