Solved

Sidebar customization

  • 30 April 2021
  • 8 replies
  • 146 views
A
  • Anonymous
  • 0 replies

 

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?

icon

Best answer by Julian 11 May 2021, 16:52

View original

8 replies

Julian
Rank
Userlevel 2
Badge +3

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

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

Julian
Rank
Userlevel 2
Badge +3

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

Added here: 

 

JessicaMendez
Rank

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
Rank
Userlevel 2
Badge +3

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
Rank
Badge

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
Rank
Userlevel 2
Badge +3

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

Reply


Terms & ConditionsCookie settings