Skip to main content
Solved

Sidebar customization

  • April 30, 2021
  • 8 replies
  • 187 views
A
  • Anonymous

 

In inSided’s community (in the topic sidebar) there is a CTA that enables you to have a secondary prompt around asking questions, starting conversations that looks like this
 


Is that done with a HTML block or is there an existing block in the system that enables you to have a title, text, and a button that I’m missing?

Best answer by Julian

This is being done with a simple HTML block. It is actually quite easy to implement and customize. It originally was a login box but we re-purposed it for all sorts of things in the meantime. Feel free to use this code yourself:

<div class="html"><div class="box login-box">
 <h3>Not finding what you're looking for?</h3>
 <p class="login-context">Don't be shy and let us know about your challenge.</p>
<a href="https://community.insided.com/topic/new" class="btn--cta">Ask your question here!</a>
</div>

<style>
 .login-box{
 margin-top: 40px;
 margin-bottom: 32px;
 border: 1px solid #d3d3d3;
 padding: 24px;
 border-radius: 8px;
 }
 .login-box.hidden{
 display: none;
 }
 .login-box a.btn--cta, .login-box a.btn--toggle{
 width: 100%;
 margin-top:5px;
 border-radius: 100px;
 }
 .login-box a.btn--toggle{
 background-color: #fff;
 color: #00ddc7;
 border-color: #00ddc7;
 font-size: 16px;
 }
 .login-box a.btn--toggle:hover{
 background-color: #fff;
 color: #00ddc7;
 box-shadow: inset 0 0 0 1px #07c;
 }

 .login-box .login-context{
 margin-top: 8px;
 }
</style></div>

Maybe I can even add a small link underneath the button to point here, so that more people can enjoy it. :)

 

Julian
DannyPancratz
aluciani

8 replies

Julian
Forum|alt.badge.img+8
  • Julian
  • Gainsight Employee ⭐️⭐️⭐️
  • Answer
  • May 11, 2021

This is being done with a simple HTML block. It is actually quite easy to implement and customize. It originally was a login box but we re-purposed it for all sorts of things in the meantime. Feel free to use this code yourself:

<div class="html"><div class="box login-box">
 <h3>Not finding what you're looking for?</h3>
 <p class="login-context">Don't be shy and let us know about your challenge.</p>
<a href="https://community.insided.com/topic/new" class="btn--cta">Ask your question here!</a>
</div>

<style>
 .login-box{
 margin-top: 40px;
 margin-bottom: 32px;
 border: 1px solid #d3d3d3;
 padding: 24px;
 border-radius: 8px;
 }
 .login-box.hidden{
 display: none;
 }
 .login-box a.btn--cta, .login-box a.btn--toggle{
 width: 100%;
 margin-top:5px;
 border-radius: 100px;
 }
 .login-box a.btn--toggle{
 background-color: #fff;
 color: #00ddc7;
 border-color: #00ddc7;
 font-size: 16px;
 }
 .login-box a.btn--toggle:hover{
 background-color: #fff;
 color: #00ddc7;
 box-shadow: inset 0 0 0 1px #07c;
 }

 .login-box .login-context{
 margin-top: 8px;
 }
</style></div>

Maybe I can even add a small link underneath the button to point here, so that more people can enjoy it. :)

 

I follow my nose, it always knows
A
Milla
A
  • Anonymous
  • May 14, 2021

Thanks @Julian BTW this would make for a really great widget in inSided.

Julian
Julian
Forum|alt.badge.img+8
  • Julian
  • Gainsight Employee ⭐️⭐️⭐️
  • May 17, 2021

We do have something similar as part of each new default community that we create, but a slightly easier to customize interface clearly would help also those that don't want to work with HTML. Good suggestion!

I follow my nose, it always knows
A
  • Anonymous
  • May 17, 2021

Added here: 

 

Julian
JessicaMendez
  • JessicaMendez
  • Contributor ⭐️⭐️⭐️⭐️
  • August 21, 2023

Is there an easy way to add an embedded video into the sidebar widget? Something that the user can view instantly by clicking play (not being redirected to another page to watch the video) ?

Julian
Forum|alt.badge.img+8
  • Julian
  • Gainsight Employee ⭐️⭐️⭐️
  • August 25, 2023

Absolutely! I would simply use an HTML widget, where you can add in the embed code. Such a code snippet usually is provided by most platforms. 

I just tested this in a test environment, by simply taking the embed code from a youtube video and pasting it into the HTML widget. It works right away, however you might want to adjust the size of the player, as the default dimensions are a bit too large for the side bar:

But this can be tweaked easily as well, simply edit the values for the width here:

Hope this helps!

I follow my nose, it always knows
aluciani
revote
aluciani
Forum|alt.badge.img
  • aluciani
  • Helper ⭐️
  • August 26, 2023

Any idea what a good size is for YouTube on the sidebar @Julian ?

I’d like to try this out and see what kind of views we get.

I am currently using width=“341” height=“192" and think that is pretty good.

Julian
Forum|alt.badge.img+8
  • Julian
  • Gainsight Employee ⭐️⭐️⭐️
  • September 1, 2023

So I received the information that the max width would be 350px. While I was hoping that Youtube would automatically adjust the height as well, this was not the case (it did it with the video, but added black padding at the top and bottom). I played around with it for a bit and found that a height of 200px gave the best results in my opinion.

I have seen other communities using smaller versions of this - which might be a good call as it does not come over as overwhelming compared to other elements in the page (in my own opinion). It probably also depends a bit on the content of the video, e.g. if it is a person speaking or if it’s an event trailer, the overall level of details / size of text. I’d say that this would be influencing my decision on how big I want it to be.

I follow my nose, it always knows
aluciani
Terms & ConditionsCookie settingsAccessibility statement