Adding buttons in an Article

Hi Paul!

From what I can tell this isn’t currently possible. The best option is to add hyperlinked text using the link function. If you want to call it out as much as possible you can link text in a Callout feature in the text editor for articles! 

There’s an Idea opened to allow for more robust editing using “Source”. Definitely take a look to see if it interests you! The comments might also have some helpful information for workarounds ?

• HTML In Articles for Admins New Idea
• 8 Votes

Hi! Yeah, that''s the way we do it now, but y’know, I like buttons. ? Looks a lot better imo.

https://communities.gainsight.com/fid-0/tid-21950

This way is also handy, but it is a bit large.

Mattie K wrote:

 

There’s an Idea opened to allow for more robust editing using “Source”. Definitely take a look to see if it interests you! The comments might also have some helpful information for workarounds ?

• HTML In Articles for Admins New Idea
• 8 Votes

 

Upvoted that one the moment I saw it. ;) I hoped there would be some work around but I guess not.

@Paul_ unfortunately not right now.

My first workaround thought would have been an image with hyperlink.

But alas, hyperlinked images is not an option either.

Thanks for the voting and pushing of the product! 👍🏻

bas wrote:

This is indeed not possible

 

But…

 

You can make it look like it’s possible with a little bit of trickery :)

 

Love this, thanks! I’ll play around with it on staging.

So this works pretty well I think @bas. Whenever I use the red call out option, it will be a button(-ish kinda). 

Hello! 👋

Maybe this doesn’t help at all, but want to share what we’ve done to include buttons 😊

I have the same use-case as our main site uses buttons in texts.

What i have done instead is to customize the spoilers to look like buttons. It doesn’t work as a button where you are directed somewhere else, but I think it brings a more seamless experience between our two websites aestheticly. It looks like this:

Standard:

(Visa=Show)

While hovering:

Opened spoiler:

(Stäng=close)

Here is the code I used:

.spoiler-container {
  border: none;
  margin-top: 20px;
}

.spoiler-container .spoiler-toggle-button {
  text-decoration: none;
  margin-bottom: 20px;
}

.spoiler-toggle-button span {
  border: 1px solid #000;
  background-color: #fff;
  border-radius: 50px;
  padding: 10px 30px;
  transition: 200ms;
  margin-left: 10px;
}

.spoiler-toggle-button span:hover {
  box-shadow: rgba(0, 0, 0, 0.4) 0 2px 9px;
}

@Paul_ @bas  @Alistair FIeld  @Mattie K 

Ok, I have maybe come up with a workaround to a working CTA in articles 😜

You can see it here in a draft I made

How i did:

So the standard heading-sizes in InSided is H1, H2 and H3. So when creating an article I thought maybe we could assign one heading as a “Button heading”. Lets choose “H6”, since we never use or have used the H6-heading.

1. Create the content of the article. The button in my case reads “Click here” and I have hyperlinked it using the “insert link” button:

   

2. Go to the HTML-editor, and change the “Click me” paragraph from “<p><a href=yourlink>Click here</a></p>” to “<h6><a href=yourlink>Click here</h6>”:

   

3. Now we have an article that looks something like this:

   

4. Now I add this styling in the custom-CSS panel, and directly towards the H6, and H6 Anchor tag - the styling is our brand styling, so you might want to change som colors and stuff:

   .post__content h6{
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 10px 20px;
     font-size: 16px;
     font-weight: 500;
     background-color: #fb8400;
     border-radius: 100px;
     width: 150px;
     transition: 200ms;
     cursor: pointer;
   }
   
   .post__content h6 a {
     color: #000!important;
     text-decoration: none!important;
   }
   
   .post__content h6:hover{
     box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
   }

5. The end result was pretty pleasing! Keep in mind, you must press the text for the link to work, as it really is a styled text-link. 
   
   Standard:

   

   
   While hovering:

   

The problem is that each time you want to make a button, you need to change the value <p> to <h6>, but I think that’s alright! 😊

@JeppePeppe What a great workaround! Thanks for sharing 😃

Now if I can get our team to agree to not use one of the header sizes… 😅

I think @JeppePeppe workaround is best because you dont have to modify css to each and every article.

Thanks for the tip, some day I have to test this.

(Hopefully inSided offers out of the box solution in the future)

O, great ideas! Very cool. Thanks for all the help!

Also: great url used. Got me.

@Paul_ Haha nice 😉

Nice work @JeppePeppe !

@JeppePeppe Can I ask a follow up?

I used your method to try it out and it looks great on desktop. But on mobile it changes to a normal text url. Any ideas? I know how to tweak stuff but making it responsive proof.. I dunno.

@Paul_ How weird!

I checked the article you linked and looked at the console, and from what I can see you have a media query “(min width: 1025px) on this code - when the screen gets a width that is smaller than that - the code dissappears.

Can you see if you have this media query in the code? I would just remove it, since the CTA-button doesn’t need adjustment for screen sizes 😊

JeppePeppe wrote:

@Paul_ How weird!

I checked the article you linked and looked at the console, and from what I can see you have a media query “(min width: 1025px) on this code - when the screen gets a width that is smaller than that - the code dissappears.

 

 

Can you see if you have this media query in the code? I would just remove it, since the CTA-button doesn’t need adjustment for screen sizes 😊

You’re a legend. 🙂

It was some code to change the featured topics on mobile I think. It's gone now. And the button works. Thanks!

Great! Happy to hear that it works 😁

.post__content h6{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 500;
  background-color: #fb8400;
  border-radius: 100px;
  width: 150px;
  transition: 200ms;
  cursor: pointer;
}

.post__content h6 a {
  color: #000!important;
  text-decoration: none!important;
}

.post__content h6:hover{
  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
}

@JeppePeppe You are truly wizard 🧙. Thanks a lot for this tip.

I used Copilot to made small changes to the CSS. When using this CSS, button adapts to the length of the text:

.post__content h6{
  display: inline-block;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 500;
  background-color: #fb8400;
  border-radius: 100px;
  transition: 200ms;
  cursor: pointer;
}

.post__content h6 a {
  color: #000!important;
  text-decoration: none!important;
}

.post__content h6:hover{
  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
}

I'm gonna check it out. I’ve currectly got 3 different sizes buttons via CSS so 1 that adapts would be better.😅

Okay, this works like charm @revote. Many thanks! If you’ve got any more CSS gems, let me know :P

Nice 👌 Let´s all say big thanks to the @JeppePeppe. He is the master here 😎

Haha, I dont do CSS. At all. I can only try to modify existing codes. Copilot is the best buddy 😀

Amazing @revote! I’ll add this to our community right away, great upgrade! ⭐