Streaming live at 10am (PST)

UserVoice Integration


#1

How can I make the following code (a uservoice modal) work within webflow? I want it to open from a button, not a text link. Thanks!



Feedback & Support


#2

Hi, you can copy the bottom link code into an embed code widget, assign a class to that widget, and then style the html embed code block so that it looks like a button. You can change the text title for the link the "Feedback & Support" part to anything you want, and you just set the styles you want for the html embed code widget to look as you like.

Here is some example button css code, but you can get a lot of button css styles on the web for free and just use those settings in for the html embed code block using the css properties panel.

.feedback {
display: block;
width: 115px;
height: 25px;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
}

Just use the settings for some button css you like, and make those same settings for the .feedback class you assigned in webflow to the html embed code block..

Just one suggestion, maybe others have more better ways...Hope that helps...


#3

also, you can put the script in the custom code settings in the before body section... I think this would work in an html embed code widget too... You can also sort of split up this embedded link and use the custom attributes to specify those things like data-uv-lightbox="classic_widget", but you don't need to do that, you can use the link as it is, just by copy paste the whole thing into it's own html embed code widget, and then styling that widget.

If you need an example of this, I can make one and post you the webflow project link...cheers


#4

Thanks for the tips @cyberdave! Really appreciated! How should I go about doing this if the button is actually a NavLink button, inside a menu that's already existing?


#6

Hi, ok, what you need to do is to re-write things a bit, here is how you do it... first, you need to take the original javascript code, and turn that into a function that you can paste in the before body section of custom code:

Next, on your nav menu link that you want to call this uservoice script, leave the link as "#":

Next, set the id of the link to "txtlink" (note you can use any id you want, just make sure it is the same id used in the function you pasted in the custom code. After you assign an id to the link, fill in the custom link attributes as shown in the screenshot.

After you done all this, then save your changes and publish... then click the link in question and uservoice will appear smile

I hope that helps you smile

Cheerios!


#7

@cyberdave I've followed every step you mentioned, but for some reason, it doesn't seem to work. When I click on the menu link, it goes to a blank page. Below are my settings (note that webflow automatically adds "http://" before the # sign in the URL setting...


#8

Hi, it is because you have the http:// there in the beginning of the link, that you get blank page... ... you need to use the default value of "#" when you first create the menu (don't change anything, because i have not figured out how to put just # there in the field...it comes as default, but if you change it even once, then you can not seem to get it back... i posted another topic on this in support category)

try recreating the nav menu link, just drag a new nav menu link, or copy one with the default # link, and then set the id for the nav menu link to txtlink like you have done, but leave that url field alone...


#9

I deleted the old link and made a new one. All settings are right (as shown below). Yet when I click on the link, it stays on the same page, but the # sign is added to the URL.


#10

Hi, You also need to add the custom attributes into the link from the original text link code you pasted in your original request... see my pic below, it shows I have entered the data-uv-xxx attributes from the original code:

Once you add those attributes, try it again. I was able to get this to work, so if it still does not work, then check all instructions again, and do the steps again, make sure the code is identical etc... I think you are getting there smile

Cheers smile


#11

Thats what I was missing! Thanks @cyberdave smiley


#12

You are welcome @LaurentCardinal smile


#13