Feedback
Solved

Typeform chat and inSided


Userlevel 1
Badge

I’m using inSided with my company community as well and have added a Typeform which we’re surfacing with a chat interface. We’ve noticed when we add the code that the chat bubble overlaps with the topic post icon that inSided displays on mobile.

Here’s a screenshot so you can see what I mean:

Is there a way that you can change the position of the Typeform chat bubble somehow. I couldn’t locate any options in Typeform.

icon

Best answer by Scott Baldwin 19 June 2021, 05:22

Thanks everyone. Tried my best but wasn’t able to crack it with my level of CSS skills. There’s just so much competing for the positioning of elements. Found another approach that will do for now until I can get some dev resources to explore options more fully. While not as elegant as the chat experience, it will work.

Went with a popup that triggers via a link and added it to a sidebar HTML widget. Here’s what it looks like:

 

View original

11 replies

Userlevel 7
Badge +6

@Scott Baldwin - from another user

best thing to do is to raise a support ticket with this link here. they are pretty good about looking into the issues and connecting to the product team for issues, etc. 

(that is, if you haven’t already)

des

Badge +4

I actually want to follow this closely @Scott Baldwin as we want to do the exact same thing here in this community! 

Userlevel 1
Badge

It actually works really well on desktop and the experience is fantastic. Just this problem to work though on mobile. I switched to chat from the pop out as the interaction is much nicer. 

Badge +4

Nice. Any issues when embedding besides this? 

We are actually using the InSided - Productboard integration too (in Beta). But that's a conversation for another day 😋

Any issues getting in touch with our tech support team let us know. 

Userlevel 1
Badge

None that I’ve found. Works great on topics too. 
 

the beta Productboard integration is ok, but needs work. Not a fan of how they made it per message vs. across an entire topic. Chrome extension is a good workaround. 

Userlevel 6
Badge +5

Hi Scott,
This may require some dev work from your side to adapt the code snippet to it displays differently on mobile.

You could probably rely on our Embed SDK to achieve this.

If Insided let you add some custom CSS rules you can add a rule so that on mobile the popever comes from the left instead of the right.

Another alternative coud be to find the line that says `right:26px;` and remove it. this will change both desktop and mobile experience and have the popover aligned to the left.

Userlevel 1
Badge

Thanks everyone. Tried my best but wasn’t able to crack it with my level of CSS skills. There’s just so much competing for the positioning of elements. Found another approach that will do for now until I can get some dev resources to explore options more fully. While not as elegant as the chat experience, it will work.

Went with a popup that triggers via a link and added it to a sidebar HTML widget. Here’s what it looks like:

 

Badge +4

Thanks for the heads up @Scott Baldwin I'll use this discussion to inform how we go about setting up our chat interface here. 

Have a fantastic weekend 

Userlevel 7
Badge +5

Hi @Scott Baldwin are you open at all to sharing a link to where you have this setup? I’d love to take a look, if that’s ok!

Userlevel 1
Badge

Sure @Liz -- I’ll DM you a link (we’re in beta right now)

Userlevel 7
Badge +5

Thank you, @Scott Baldwin ! :smiley:

Reply