{"id":20703,"date":"2019-06-25T17:21:03","date_gmt":"2019-06-25T16:21:03","guid":{"rendered":"https:\/\/www.intercom.com\/blog\/?p=20703"},"modified":"2020-07-30T12:54:37","modified_gmt":"2020-07-30T11:54:37","slug":"accessibility-buttons-messenger","status":"publish","type":"post","link":"https:\/\/www.intercom.com\/blog\/accessibility-buttons-messenger\/","title":{"rendered":"Hot button issue: Improving accessibility in the Messenger"},"content":{"rendered":"

When building product at Intercom, we move fast so that we can deliver value to our customers and validate our solutions to their problems as early on as possible. As a result of this fast pace, we sometimes need to circle back to polish past work that can be improved and iterated on.<\/p>\n

One recent example involved an accessibility issue in the \u201cquick reply\u201d buttons in our Messenger \u2013 a seemingly small detail in its own right, but one that we were able to revisit and improve to ensure we met the highest web accessibility standards.<\/p>\n

The old way<\/h2>\n

Quick reply buttons offer users a range of options that allow them to pick a topic and easily begin their interaction in the Messenger. In the previous design, the quick reply buttons had a default state and then a hover state when a user moved their cursor over the button. Once clicked, a conversation would be triggered and the button would enter an active state, which was the same appearance as its hover state.<\/p>\n

\"\"

How quick reply buttons used to appear in the Intercom Messenger when in their default inactive state<\/em><\/p><\/div>\n

To style their Messenger and personalize it to their own brand, customers can choose two different colors, a background color for team profile and other backgrounds, and an action color for use in buttons, links and highlights.<\/p>\n

\"\"

Color choices in Messenger settings<\/em><\/p><\/div>\n

In their default state, the quick reply buttons always had a white background, and the action color was used for the text and border of the buttons. In the hover and default states, the action color would become the solid button color.<\/p>\n

In some cases, if the action color had a very low contrast with the white background in the default state, black was used instead for the text and border to increase legibility.<\/p>\n

\"\"

Some examples of buttons in the previous design<\/em><\/p><\/div>\n

The goals of the improved button design<\/h2>\n

There were a number of things that we wanted to achieve with the new quick reply button design.<\/p>\n

1. Improve readability<\/h3>\n

We noticed that the borders affected readability when there were a few quick reply buttons stacked together, particularly with darker action colors.<\/p>\n

<\/p>\n

2. Improve accessibility<\/h3>\n

We have a high bar for accessibility standards in the Intercom Messenger<\/a> and always try to ensure an accessibility level of conformance<\/a> of AA for regular text and AAA for large text, which means meeting the highest accessibility criteria as defined by the Web Content Accessibility Guidelines<\/a> (WCAG) international standard.<\/p>\n

For quick replies, this translates to having a contrast ratio above 4.5:1 between the background and text colors. After doing a quick study of the state of quick reply buttons in the wild, we realized that the previous default state design did not meet this bar a lot of the time.<\/p>\n

\"\"

Some examples of quick replies that had poor contrast ratios. On the right is the color that was used on our own Intercom Messenger, which fell just below our desired contrast ratio.<\/em><\/p><\/div>\n

3. Personalize quick replies regardless of the action color chosen<\/h3>\n

Previously, in an attempt to improve accessibility, when our customers selected an action color that had a very poor contrast ratio against the white background, the Intercom Messenger changed the quick reply color to black.<\/p>\n

\"\"

Some examples of colors where we defaulted the quick reply text and border to black.<\/em><\/p><\/div>\n

Our mission is to \u201cmake internet business personal,\u201d and whether our customers got the personalized experience that we promise depended on their choice of action color. Automatically ignoring their choice of action color was not a good enough experience.<\/p>\n

4. Hover state = active state<\/h3>\n

Finally, to polish the user experience, we wanted the hover state of the new quick replies to always correspond with their active state.\u00a0In the old design, however, those quick replies that automatically changed to black would also have the black border on hover, but not in the active state. Therefore, the hover state in these situations looked different to the active state, which was not ideal.<\/p>\n

\"\"<\/p>\n

The solution<\/h2>\n

We were not able to find a “one size fits all” solution that would meet all the requirements listed above, so we had to take a different approach.<\/p>\n

Default state change<\/h3>\n

The new default quick reply button design removes the border and introduces a very light background instead of the white background of the old design. To attain this subtlety, we explored levels of lightness for different colors, where lightness ranges from 0 (for black) to 1 (for white). A lightness of 0.95 seemed to be the right level for achieving the background effect we were looking for:<\/p>\n

\"\"

A sample of colors with 0.95 lightness<\/em><\/p><\/div>\n

Also, the text color is no longer the action color, but instead both the text and the background vary depending on three different sets of logic we devised to automatically attain a contrast ratio around 4.5:1, no matter what action color the customer chooses.<\/p>\n

The logic used is contingent on the lightness or darkness of the chosen action color. Given an action color for an app:<\/p>\n

    \n
  • If the action color lightness > 0.90\n
      \n
    • Background color = action color darkened to a lightness level of 0.85<\/li>\n
    • Text color = action color darkened to a lightness level of 0.30<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
      \"\"

      Quick reply end result for a very light action color<\/em><\/p><\/div>\n

        \n
      • If the action color lightness < 0.35\n
          \n
        • Background color = action color lightened to a lightness level of 0.95<\/li>\n
        • Text color = action color<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
          \"\"

          Quick reply end result for a dark action color<\/em><\/p><\/div>\n

            \n
          • If 0.35 \u2264 action color lightness \u2264 0.90\n
              \n
            • Background color = action color lightened to a lightness level of 0.95<\/li>\n
            • Text color = action color darkened to a lightness level of 0.30<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
              \"\"

              Quick reply end result for a medium action color<\/em><\/p><\/div>\n

              Hover state consistency<\/h3>\n

              In our new design, the absence of any borders means the hover state will always look the same as the active state. We intentionally built the logic such that the background color of the quick reply is never the same as the action color.<\/p>\n

              Below are some examples of the old quick reply designs versus the new ones. Observe the contrast ratios, and the difference between the hover and active state for each of them.<\/p>\n

              \"\"

              The top row represents the active state of quick replies, showing the action color. The middle rows are examples of the default and hover states in the old design, and the bottom two rows are the default and hover states of our new design.<\/em><\/p><\/div>\n

              Does the new design meet our own requirements?<\/h2>\n

              \u2705 Improved readability<\/h3>\n

              As a result of these changes, the quick replies become more subtle and simultaneously easier to read. The improved legibility is apparent in the image below:<\/p>\n

              \"\"

              The before and after of the new quick reply buttons in the Intercom Messenger<\/em><\/p><\/div>\n

              \u2705 Improved accessibility<\/h3>\n

              The logic described as part of our solution was built around the premise of making our quick replies as accessible as possible. Below are some examples of the massive improvement in contrast ratios of our new design versus the previous one.<\/p>\n

              \"\"

              Improved contrast ratios with the new design<\/em><\/p><\/div>\n

              Unfortunately, there is no perfect mathematical formula that can ensure we’ll end up with two colors with a contrast ratio above 4.5:1, especially for brighter colors, like yellow.<\/p>\n

              However, we did see a significant improvement in accessibility for many of our customers.<\/p>\n

              \u2705 Personalized quick replies regardless of the action color chosen<\/h3>\n

              Like I mentioned at the beginning of the post, when a color had a bad contrast ratio against a white background, we used to default quick replies to being black.<\/p>\n

              With the new design, instead of compromising a personalized experience in order to ensure accessibility, we now ensure it by tuning the lightness levels of the action color for the text and background.<\/p>\n

              \"\"

              With the new design, when the action color choice is light, we find two shades of the color that ensure a good contrast ratio.<\/em><\/p><\/div>\n

              \u2705 Hover state = active state<\/h3>\n

              Last but not least, the new quick reply design guarantees that the hover state will always be identical to the active once the button is clicked. This improves the design quality and user experience of our Messenger.<\/p>\n

              Spreading accessibility<\/h2>\n

              With the old design, 9.9% of our customers’ messengers had a quick reply design with a contrast ratio below 4.5:1 and that therefore did not meet our desired accessibility bar. With the new design, only 2.1% of our customers’ messengers don’t meet the desired ratio \u2013 this is five times better.<\/p>\n

              We also looked at a lower ratio of 3:1, under which accessibility is very poor. For the old design, we found 5.5% of our customers’ messengers had quick replies with a contrast ratio lower than this \u2013 while with the new design, only 0.07% of those messengers had a contrast ratio lower than 3:1. This is 78 times better with the new design, a remarkable improvement.<\/p>\n

              It also demonstrates how making the web truly accessible for everyone depends on sweating a lot of details, but when you get those details right, the benefits can be felt far and wide.<\/p>\n","protected":false},"excerpt":{"rendered":"

              Making the web truly accessible for everyone depends on sweating a lot of details, and when you get those details right, the benefits can be felt far and wide.<\/p>\n","protected":false},"author":411,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"category":[12898],"tags":[17545],"coauthors":[17533],"class_list":["post-20703","post","type-post","status-publish","format-standard","hentry","category-engineering","tag-accessibility"],"yoast_head":"\nHot Button Issue: Improving Accessibility In The Messenger<\/title>\n<meta name=\"description\" content=\"We revisited the color contrast ratios of the Intercom Messenger \u201cquick reply\u201d buttons to ensure we met the highest web accessibility standards.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.intercom.com\/blog\/accessibility-buttons-messenger\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hot button issue: Improving accessibility in the Messenger\" \/>\n<meta property=\"og:description\" content=\"We revisited the color contrast ratios of the Intercom Messenger \u201cquick reply\u201d buttons to ensure we met the highest web accessibility standards.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.intercom.com\/blog\/accessibility-buttons-messenger\/\" \/>\n<meta property=\"og:site_name\" content=\"The Intercom Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/intercominc\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-25T16:21:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-30T11:54:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/06\/13-before-and-after-of-quick-reply-buttons.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Paula Lopez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@plopezpozuelo\" \/>\n<meta name=\"twitter:site\" content=\"@intercom\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Paula Lopez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/accessibility-buttons-messenger\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/accessibility-buttons-messenger\\\/\"},\"author\":{\"name\":\"Paula Lopez\",\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/#\\\/schema\\\/person\\\/477074b835758473171110327ba8c2df\"},\"headline\":\"Hot button issue: Improving accessibility in the Messenger\",\"datePublished\":\"2019-06-25T16:21:03+00:00\",\"dateModified\":\"2020-07-30T11:54:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/accessibility-buttons-messenger\\\/\"},\"wordCount\":1574,\"publisher\":{\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/accessibility-buttons-messenger\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/1-old-button-design.jpg\",\"keywords\":[\"accessibility\"],\"articleSection\":[\"Engineering\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/accessibility-buttons-messenger\\\/\",\"url\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/accessibility-buttons-messenger\\\/\",\"name\":\"Hot Button Issue: Improving Accessibility In The Messenger\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/accessibility-buttons-messenger\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/accessibility-buttons-messenger\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/1-old-button-design.jpg\",\"datePublished\":\"2019-06-25T16:21:03+00:00\",\"dateModified\":\"2020-07-30T11:54:37+00:00\",\"description\":\"We revisited the color contrast ratios of the Intercom Messenger \u201cquick reply\u201d buttons to ensure we met the highest web accessibility standards.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.intercom.com\\\/blog\\\/accessibility-buttons-messenger\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/accessibility-buttons-messenger\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/1-old-button-design.jpg\",\"contentUrl\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/1-old-button-design.jpg\",\"width\":1400,\"height\":1151,\"caption\":\"How quick reply buttons used to appear in the Intercom Messenger\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/\",\"name\":\"The Intercom Blog\",\"description\":\"Articles and Podcasts on Customer Service, AI and Automation, Product, and more\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/#organization\",\"name\":\"The Intercom Blog\",\"url\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/Intercom-logo-sq-black-trans.png\",\"contentUrl\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/Intercom-logo-sq-black-trans.png\",\"width\":1000,\"height\":1000,\"caption\":\"The Intercom Blog\"},\"image\":{\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/intercominc\",\"https:\\\/\\\/x.com\\\/intercom\",\"https:\\\/\\\/www.instagram.com\\\/intercom\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/2491343\",\"https:\\\/\\\/www.pinterest.ie\\\/intercom\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCJG0MvLP03kyzzAkD-w98aQ\",\"https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Intercom_(company)\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/#\\\/schema\\\/person\\\/477074b835758473171110327ba8c2df\",\"name\":\"Paula Lopez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9422cd6e98bc2af68d219df105ffbb7b823658b749063f84a713ea52fc1e1945?s=96&d=mm&r=pgb02356557120b59371b50eda05dab8fc\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9422cd6e98bc2af68d219df105ffbb7b823658b749063f84a713ea52fc1e1945?s=96&d=mm&r=pg\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9422cd6e98bc2af68d219df105ffbb7b823658b749063f84a713ea52fc1e1945?s=96&d=mm&r=pg\",\"caption\":\"Paula Lopez\"},\"description\":\"Paula is a Product Engineer at Intercom, based in London. Paula joined Intercom in April 2018 from Songkick where she was a Tech Lead.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/plopezpozuelo\"],\"url\":\"https:\\\/\\\/www.intercom.com\\\/blog\\\/author\\\/plopezpozuelo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Hot Button Issue: Improving Accessibility In The Messenger","description":"We revisited the color contrast ratios of the Intercom Messenger \u201cquick reply\u201d buttons to ensure we met the highest web accessibility standards.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.intercom.com\/blog\/accessibility-buttons-messenger\/","og_locale":"en_US","og_type":"article","og_title":"Hot button issue: Improving accessibility in the Messenger","og_description":"We revisited the color contrast ratios of the Intercom Messenger \u201cquick reply\u201d buttons to ensure we met the highest web accessibility standards.","og_url":"https:\/\/www.intercom.com\/blog\/accessibility-buttons-messenger\/","og_site_name":"The Intercom Blog","article_publisher":"https:\/\/www.facebook.com\/intercominc","article_published_time":"2019-06-25T16:21:03+00:00","article_modified_time":"2020-07-30T11:54:37+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/06\/13-before-and-after-of-quick-reply-buttons.jpg","type":"image\/jpeg"}],"author":"Paula Lopez","twitter_card":"summary_large_image","twitter_creator":"@plopezpozuelo","twitter_site":"@intercom","twitter_misc":{"Written by":"Paula Lopez","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.intercom.com\/blog\/accessibility-buttons-messenger\/#article","isPartOf":{"@id":"https:\/\/www.intercom.com\/blog\/accessibility-buttons-messenger\/"},"author":{"name":"Paula Lopez","@id":"https:\/\/www.intercom.com\/blog\/#\/schema\/person\/477074b835758473171110327ba8c2df"},"headline":"Hot button issue: Improving accessibility in the Messenger","datePublished":"2019-06-25T16:21:03+00:00","dateModified":"2020-07-30T11:54:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.intercom.com\/blog\/accessibility-buttons-messenger\/"},"wordCount":1574,"publisher":{"@id":"https:\/\/www.intercom.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.intercom.com\/blog\/accessibility-buttons-messenger\/#primaryimage"},"thumbnailUrl":"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/06\/1-old-button-design.jpg","keywords":["accessibility"],"articleSection":["Engineering"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.intercom.com\/blog\/accessibility-buttons-messenger\/","url":"https:\/\/www.intercom.com\/blog\/accessibility-buttons-messenger\/","name":"Hot Button Issue: Improving Accessibility In The Messenger","isPartOf":{"@id":"https:\/\/www.intercom.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.intercom.com\/blog\/accessibility-buttons-messenger\/#primaryimage"},"image":{"@id":"https:\/\/www.intercom.com\/blog\/accessibility-buttons-messenger\/#primaryimage"},"thumbnailUrl":"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/06\/1-old-button-design.jpg","datePublished":"2019-06-25T16:21:03+00:00","dateModified":"2020-07-30T11:54:37+00:00","description":"We revisited the color contrast ratios of the Intercom Messenger \u201cquick reply\u201d buttons to ensure we met the highest web accessibility standards.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.intercom.com\/blog\/accessibility-buttons-messenger\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intercom.com\/blog\/accessibility-buttons-messenger\/#primaryimage","url":"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/06\/1-old-button-design.jpg","contentUrl":"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/06\/1-old-button-design.jpg","width":1400,"height":1151,"caption":"How quick reply buttons used to appear in the Intercom Messenger"},{"@type":"WebSite","@id":"https:\/\/www.intercom.com\/blog\/#website","url":"https:\/\/www.intercom.com\/blog\/","name":"The Intercom Blog","description":"Articles and Podcasts on Customer Service, AI and Automation, Product, and more","publisher":{"@id":"https:\/\/www.intercom.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.intercom.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.intercom.com\/blog\/#organization","name":"The Intercom Blog","url":"https:\/\/www.intercom.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intercom.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/08\/Intercom-logo-sq-black-trans.png","contentUrl":"https:\/\/www.intercom.com\/blog\/wp-content\/uploads\/2019\/08\/Intercom-logo-sq-black-trans.png","width":1000,"height":1000,"caption":"The Intercom Blog"},"image":{"@id":"https:\/\/www.intercom.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/intercominc","https:\/\/x.com\/intercom","https:\/\/www.instagram.com\/intercom\/","https:\/\/www.linkedin.com\/company\/2491343","https:\/\/www.pinterest.ie\/intercom\/","https:\/\/www.youtube.com\/channel\/UCJG0MvLP03kyzzAkD-w98aQ","https:\/\/en.wikipedia.org\/wiki\/Intercom_(company)"]},{"@type":"Person","@id":"https:\/\/www.intercom.com\/blog\/#\/schema\/person\/477074b835758473171110327ba8c2df","name":"Paula Lopez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/9422cd6e98bc2af68d219df105ffbb7b823658b749063f84a713ea52fc1e1945?s=96&d=mm&r=pgb02356557120b59371b50eda05dab8fc","url":"https:\/\/secure.gravatar.com\/avatar\/9422cd6e98bc2af68d219df105ffbb7b823658b749063f84a713ea52fc1e1945?s=96&d=mm&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9422cd6e98bc2af68d219df105ffbb7b823658b749063f84a713ea52fc1e1945?s=96&d=mm&r=pg","caption":"Paula Lopez"},"description":"Paula is a Product Engineer at Intercom, based in London. Paula joined Intercom in April 2018 from Songkick where she was a Tech Lead.","sameAs":["https:\/\/x.com\/plopezpozuelo"],"url":"https:\/\/www.intercom.com\/blog\/author\/plopezpozuelo\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/posts\/20703","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/users\/411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/comments?post=20703"}],"version-history":[{"count":0,"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/posts\/20703\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/media?parent=20703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/category?post=20703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/tags?post=20703"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.intercom.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}