RingCentral Chrome App Integration bugs

  • 0
  • 1
  • Idea
  • Updated 1 year ago
My company is using your product. I installed the chrome app and navigated to our site. Your integration hijacked my tel anchor tags and changed them to rc tags, breaking my style sheets.

See, I wrap an element styled like a button in an anchor tag to make a call button; and your integration broke that. I had to just wrap the number it-self, so now the element styled like a button is no longer a button but atleast it looks like one.

The way you hijack the html a tags and turn them into rc tags is actually frowned upon in the chrome app community. All you guys need to do is add styles to the a tag itself, not change the a tag to a different tag completely. Please fix this so that web developers do not need to actually take your app into consideration when building websites. A developer should not need to know you even exists and still have there website look right. This bug made my employer think I did something wrong when crafting the site. This is a big bug that could hurt a lot of business because they did not know that you existed and that users would be using your app.

Please goto http://cabledeals.crawfordcomputing.com. Either resize your window below 800px width, or enter an address with zip of 12346 (bad zip). Either will net you an orange call button. If you hover your mouse over the button, you will see that it is not a button, but that only the phone number is clickable. I wanted the whole button clickable, but your integration made the whole button disappear due to how it hijacked the link...this is my temporary solution restricting the clicking to just the number.. 

Put in a good zip (try 41011, the address is not processed only the zip) to see what i mean on the next page, the call link in the top right is messed up... I did not fix it yet to handle your integration.

Please fix this soon so that I can revert my site sheet back and have proper call buttons. 
Photo of Jon Crawford

Jon Crawford

  • 82 Points 75 badge 2x thumb

Posted 1 year ago

  • 0
  • 1
Photo of Jitender Kumar

Jitender Kumar, Director Application Development

  • 1,476 Points 1k badge 2x thumb
Hello Jon, 
Sorry for the trouble and thank you for detailed message. We have a setting in the app that user can disable the click to dial. But as you mentioned there is a bug in the app it does not clean up it's act even when it is disabled and leaves some style sheet residual. Please disable the Chrome Extension when you are testing your pages. We will try to fix it next release. 
(Edited)
Photo of Jon Crawford

Jon Crawford

  • 82 Points 75 badge 2x thumb
Thank you for the reply. Just to clarify:
  
Please fix it so that the anchor tag's ( the a and /a inside <>) remain anchor tags and are not changed to something else. I actually like the :after styling adding your buttons on hover, (and how when done properly they are inside my call button) but developers style their (a & /a)'s.

For ex. for the button scheme I do not want my anchor child of an element styled (for example) with class "my-phone" to be underlined. The css I use (any developer uses same technique) is

.my-phone > a { text-decoration: none }
.my-phone > a:hover { text-decoration: none } 

So you see if you change the tag from (a /a) to (rc-... /rc-...) our styles are broke.

Also: please do not remove the children of the anchor tag. You can recursively search the anchor's children, grandchildren, and great-grandchildren for the anchor's phone number, selecting the element that has the number in it's .html (text) node , and add the :after style buttons to that element (mind your z-index and propagation so that if someone clicks one of your buttons the click does not go through to the website's button opening the regular dialer as well).  See, I do something like:

div class="my-phone"
a href="tel:number"
div class="phone-button"
div, span, text="Call Now", /span, /div,
div, span class="fancy-number-font", text="number", /span, /div, 
/div
/a
/div

Your app integration completely mutated my a tag and rearranged it's guts, removing the "Call Now" and any references I had used for styling, destroying all that hard work. 

Sorry, this is pseudo-html since I don't know how this messaging would treat real html, but you get the idea. Search for second occurrence of number (How you ask? How do you find the a tags with href="tel:number" in the first place?) and your javascript should then have a reference to the proper element to style with :after. And if it's not found (developer did not want it shown for space)? Search for last child of anchor with a text node found (loop through all and keep last one, after the "Call Now"), and finally as a catch all when all that fails put it right on the anchor tag.

As you can see, it's a headache to code around you: We rearrange our html making the buttons lose their effect, and add a style to our sheet same name as yours with !important all over it to kill your styling! Few will want to do all that.

However this mainly affects developers who do not know about you and are also unaware that potential customers may be using your chrome app Therefore they don't understand why they are losing traffic: their call buttons are broke for those customers!
(Edited)
Photo of Marius K

Marius K

  • 60 Points
Your app should respect websites policy on following meta tag: <meta name="format-detection" content="telephone=no">
and do nothing to phone numbers.