Chat in Chrome on Android and iPhone

⚙️ Web integration
1

Hi, we’ve been looking at integrating live chat into some of our programs, but we’ve hit a snag. It doesn’t work at all in our streaming app—we’re talking to AirKast about that. But it also doesn’t work in Chrome on an Android phone or iPhone. It displays correctly, with the options for logging into Google or Facebook. But then only logging into Facebook works. The Google login just brings up a blank screen. Is this a known bug? Any advice? We’d love to use it, but only if our mobile users can join in. Thanks, Suki

2 Likes
2

Hi Suki, thanks for joining the forum.

This sounds a bit complicated. Can you email me so we can set up a zoom to figure out the fix?

1 Like
3

Hi Tom, We were just doing some troubleshooting and found that the chat only works correctly if it’s in an iframe. So that’s the solution—we were using the direct link to our station, K-Squid – Many Voices, One Station. That caused the error logging into Google. Once it was in an iframe, it works fine. Unfortunately, iframes are ugly. Any tips on how to make it display better? The default is teensy weensy font. We’re working on it, but if someone else has solved this, do tell! :slight_smile:

2 Likes
4

iframe is one way. Custom Layout is a great way to make that work too. See testradio.org for more. I typically do a zoom to introduce people to Custom Layout so feel free to request that even just to learn something while you’re doing the iframe thing.

1 Like
5

Thanks, my tech guy (AKA my husband Herb who you met at NFCB) is working on that. It’s funky - the text is tiny in an iframe, but when he tries to make it bigger it only increases some of the text sizes.

Back to the original question, our app vendor needs access to a chat that’s always open so they can troubleshoot. Is there such a thing? I looked at https://www.testradio.org/ but there doesn’t seem to be a page with the chat enabled. If we don’t have that, I’ll have to open chats for them on our programs, which is a bit cumbersome!

2 Likes
6

Sounds like the usual kind of CSS hacking. It’s troublesome but usually fixable. Have Herb contact me if needed.

Yes. We can get your dev into the TEST station for that. Have the vendor contact me to set that up.

It’s a bit of a slog because (and this is by design, sorry) you

  • first have to log in to Spinitron as a DJ, create a playlist, and open that playlist’s chat during (not before or after) the playlist, and the chat closes automatically and playlist end.

  • then in a separate cookie context (i.e. not logged in to Spinitron as a DJ, use a different browser or private window) test the public chat.

Obviously you could do this on the station’s Spinitron database (which station is that btw?) but it might be confusing to DJs and listeners so we can in the TEST station for that.

1 Like
7

Hi Tom,

The station is KSQD. I have emailed your message about getting test access to AirKast and they will contact you directly. Their email address is support@airkast.zohodesk.com.

Our test page is here: https://newscenter.com/wrap.html It looks great on a computer, but complete crap in Chrome on a mobile phone. We want it to look good on a phone because once AirKast figures out the bug on their end with logging in, we’d like app users to be able to use chat from within the app on their mobile phone.

Thanks, Suki

1 Like
8

Hi @tom, I’ve been trying to customize the stylesheet using e.g., https://spinitron.com/KSQD/?css=https%3a%2f%2fexample.com%2fsome-custom.css, though obviously passing a genuine URL, and am meeting with mixed success. My initial goal was simply to scale all text by 120% (random experimental value), but most of the Spinitron styles seem resistant to my entreaties.

My most recent experimental stylesheet looks something like this. The first stanza is there simply to test if my styles had any effect at all, and this stanza did: the two named sections vanished, but the playlist and other text became minuscule.

.coming-shows, .recent-playlists { /* works but makes other text tiny */
    display: none;
};

.view-page, .station-description, .onair { /* only .view-page seems to work */
    font-size: 120%;
};

To sum up, I seek to create a stylesheet to pass via the css query param that will scale up the text on the K-Squid – Many Voices, One Station page by an arbitrary factor, 120%, 140%, whatever looks best in the app.

Thanks!

1 Like
9

Hi @tom, wondering if you followed up with AirKast about getting test access so we can pressure them to get the login to work from within their app.

10

Yes, KSQD. Emailing you, thanks!

1 Like