DEV Community

Cover image for Streamlined Customer Service: Chat Integration with Gladly
Sahil Khurana
Sahil Khurana

Posted on • Originally published at innostax.com

Streamlined Customer Service: Chat Integration with Gladly

Customer expectations have never been higher. Businesses that fail to respond quickly and personally across every channel risk losing customers permanently. Gladly is a modern customer service platform built to solve exactly this problem — and integrating its chat capabilities into your website is one of the most impactful steps you can take toward delivering exceptional support.

What is Gladly?

Gladly organizes every customer interaction in one place. Unlike traditional ticketing systems, it unifies emails, phone calls, text messages, social media, and live chat into a single interface, giving agents a complete view of every customer's history. This makes communication management simple, efficient, and deeply personal. If you're evaluating platforms for your next custom software project, Gladly is worth serious consideration.

Advantages of Gladly

  1. Unified Communication — All customer conversations across every channel flow into one interface. Agents never lose context, no matter how a conversation started. This is the foundation of a great customer experience strategy.

  2. Customer Profiles — Gladly builds rich profiles that include contact details, purchase history, and past inquiries, allowing agents to deliver genuinely personalized assistance every time.

  3. Team Collaboration — Agents can share notes, assign conversations, and work together in real time — eliminating siloed inboxes and missed handoffs.

  4. Automation and AI — Gladly handles repetitive queries automatically, prioritizes important responses, and frees agents to focus on complex issues that need a human touch. Learn more about AI integration in customer workflows.
    Analytics and Reporting — Supervisors can track response times, customer satisfaction scores, and agent performance, helping teams spot patterns and continuously improve their operations.

Chat Integration with Gladly

Chat integration with Gladly brings real-time messaging directly into your customer service workflow. The centerpiece is the Glad App — an embeddable widget that lets website visitors search help content or connect with a live agent instantly. This kind of API-driven integration is exactly where experienced development teams add the most value.

The Glad App API gives developers programmatic control over the widget. Add a JavaScript loader snippet to every page of your site — it asynchronously loads the Chat SDK without blocking page performance.

Gladly.init({
  appId: "your-own-id"
}).then(function() {
  // This is called once Glad App has been initialized.

  // An element with the id "start-chat" is assumed to be on the page.
  var startChatButton = document.getElementById('start-chat');

  // An onClick handler can be attached to the "start-chat" element
  startChatButton.onclick = function() {Gladly.show()};

  // This API call gets the current availability
  var availablility = Gladly.getAvailability();

  // Setting the availability as the class name on the "start-chat" element,
  // this allows us to change the look of the button via CSS.
  startChatButton.setAttribute('class', availablility.toLowerCase());

  // Subscribe to changes in availability, and update the class on the "start-chat" element.
  Gladly.on('availability:change', function(availablility) {
    startChatButton.setAttribute('class', availablility.toLowerCase());
  });
}).catch(function(error) {
  // If anything goes wrong when Glad App is being initialized, this gets called.
  console.log('error:', error)
});


Enter fullscreen mode Exit fullscreen mode

Once the loader is in place, initialize the Glad App using your unique appId, found in Settings → Glad App in the Gladly dashboard. For basic use, a simple global config object is all you need.

<script>
 window.gladlyConfig = {
   appId: 'your-own-id'
 };
</script>


Enter fullscreen mode Exit fullscreen mode

For more control — such as launching chat from your own custom button or adjusting the UI based on agent availability — manual initialization via Gladly.init() gives you full flexibility.

Gladly.init({
  appId: "your-own-id"
}).then(function() {
  // This is called once Glad App has been initialized.

  // An element with the id "start-chat" is assumed to be on the page.
  var startChatButton = document.getElementById('start-chat');

  // An onClick handler can be attached to the "start-chat" element
  startChatButton.onclick = function() {Gladly.show()};

  // This API call gets the current availability
  var availablility = Gladly.getAvailability();

  // Setting the availability as the class name on the "start-chat" element,
  // this allows us to change the look of the button via CSS.
  startChatButton.setAttribute('class', availablility.toLowerCase());

  // Subscribe to changes in availability, and update the class on the "start-chat" element.
  Gladly.on('availability:change', function(availablility) {
    startChatButton.setAttribute('class', availablility.toLowerCase());
  });
}).catch(function(error) {
  // If anything goes wrong when Glad App is being initialized, this gets called.
  console.log('error:', error)
});


Enter fullscreen mode Exit fullscreen mode

The API also provides key methods: setUser() to pre-identify a logged-in customer so they skip the name/email form, getUser() to retrieve the current user, and clearUser() to remove the user on logout. Events like availability:change, message:received, and message:sent let you react to widget activity in real time.

Creating and Configuring the Glad App

Inside the Gladly dashboard, creating a Glad App takes just a few steps — navigate to Settings → Channels → Glad App, click Create Glad App, give it a name, and you're taken straight to the configuration screen.
The screen has three sections: Configuration (business hours, Quick Actions, throttling rules), Style (colors, border radius, widget position), and Text (all copy visible to the visitor). For the full setup walkthrough, refer to Gladly's official documentation.

What is Proactive Chat?

Proactive Chat lets you engage customers before they ask for help. Instead of waiting for a visitor to open the widget, you define campaigns that automatically initiate a conversation based on triggers — pages visited, time on site, cart value, and more. For e-commerce businesses especially, this feature directly impacts conversion rates and cart abandonment.
When setting up a campaign, you define a name, description, priority order, triggers, and an opening greeting. Two optional settings give extra control: Ignore chat throttling bypasses queue limits for high-priority campaigns, and Skip onboarding removes the name/email step to reduce friction. Full campaign configuration details are covered in Gladly's Proactive Chat guide.

Conclusion

Gladly transforms customer service from a reactive process into a proactive, unified experience. With its powerful Glad App API, rich customer profiles, and Proactive Chat campaigns, businesses can deliver faster and more personal support across every channel. If you need help integrating Gladly or building a custom chat solution, Innostax's engineering team is ready to help you ship it right.

About Innostax

Innostax is a custom software development and IT staff augmentation company. We build and integrate customer service platforms, develop custom software solutions, and provide managed engineering teams for startups, scale-ups, and digital agencies — typically in situations where customer experience is broken and needs to be fixed fast.

Top comments (0)