JSFiddle - React, Tailwind, and code Playground

by philll_t

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="toc">

</div>

<div class="entry-content">
		<p class="post-modified-info">Last Updated on February 16, 2021 by <a href="" target="_blank" class="last-modified-author">Alan Saltz</a></p>
<figure class="wp-block-image size-large"><img src="https://d3bvlor7ot19je.cloudfront.net/blog/wp-content/uploads/How-to-Deal-With-Angry-Customers.png" alt="" class="wp-image-3181" srcset="https://d3bvlor7ot19je.cloudfront.net/blog/wp-content/uploads/How-to-Deal-With-Angry-Customers.png 622w, https://d3bvlor7ot19je.cloudfront.net/blog/wp-content/uploads/How-to-Deal-With-Angry-Customers-300x199.png 300w" sizes="(max-width: 622px) 100vw, 622px"></figure>



<p>Let’s talk about how to deal with angry customers.</p>



<p>Angry customers are always a challenge.&nbsp;</p>



<p>No one wants to deal with a screaming, irate customer on the other end of the phone line. But, if you’re in customer service long enough, you won’t be able to escape it. One day, when you least expect it, you’ll find yourself in crisis mode with an angry customer.&nbsp;</p>



<p>What do you do in such a situation?</p>



<p>In this post, we share actionable tips for handling angry, unhappy customers. Let’s get started.</p>



<h2><strong>Check Your Tone</strong></h2>



<p>When speaking with an irate customer on the phone, you can’t use body language to diffuse the difficult situation. But you do have one powerful weapon at your disposal: your tone of voice.</p>



<p>The tone of your voice will have either a positive or a negative impact on your interaction with the customer.&nbsp;</p>



<p>When confronted with an angry customer, you may think the best solution is to counter that energy with a flat and unaffected tone. But that can actually backfire. Your customer doesn’t want you to match their negative energy — they want you to care! If you sound nonchalant and apathetic, that can upset them even more than...

JavaScript

$(function () {
	// get article
  const $entryContent = $(".entry-content");
  const $tocWrapper = $("#toc");
	const $oc = $("<ul></ul>");
  
  // get all the headers
  const $headers = $entryContent.find("h1, h2, h3, h4, h5, h6");
  
  const tagSpacingMap = {
    "H1": "padding-top: 15px;",
    "H2": "padding-left: 10px; margin-top: 5px;",
    "H3": "padding-left: 20px; font-size: .9rem; padding-bottom: 5px",
    "H4": "padding-left: 30px; font-size: .85rem; padding-bottom: 10px",
    "H5": "padding-left: 40px; font-size: .8rem; padding-bottom: 15px",
    "H6": "padding-left: 50px; font-size: .75rem; padding-bottom: 20px",
  };
  
  $headers.each(function () {
  		$current = $(this);
      const tagName = $current.prop("tagName");
      const spacing = tagSpacingMap[tagName];
     	const text = $current.text();
     	const id = text.replace(/[^A-Za-z]/gm, "");
      $current.attr("id", id);
  
  		$oc.append(`<li style="${spacing}"><a href="#${id}" >${text}</a></li>`);
  });
 	
  $tocWrapper.html($oc);
});