How do I add this javascript to a css button?

Design help General
1

Unable to use a javascript function on a css button.

I would love to be able to make the “book yoru appointment now” button located on the bottom of each page automatically pull the javascript, thus allowing the user to schedule an appointment using setmore.com

Here is the code provided, but it has it’s own button, but instead I want to use the one I designed.

Book an appointment with Love Bridal Boutique using SetMore

I have inserted the “script” only portion into the custom code section but I do not know where to go from there… :< please help.

Read only link:
https://preview.webflow.com/preview/lovebridalboutique?preview=9c7cb70ae486af9382a7f382de675d82

2

Hi @904TECHNOLOGY, one thing that would help, is a link to the instructions page from setmore.com, that shows how to integrate or embed this button.

Every integration is different, so if you can get those instructions, it will be easier to help find a solution !

3

Support - Setmore: Free Online Appointment Scheduling Software Does this help?

4

Any thoughts on this one? Does that link help at all?

5

Hey 904,

If im not mistaken you figured it out is that right?

6

No. There are instructions in that link above, however those are for using setmore.com’s button. I would like to use the button I created in webflow(the css/pink one).

Is it possible?

7

Wow so this is something that no one could provide any advice on? … Sad … Any help would still be appreciated!

8

For me when i click the pink button you created it takes me to: Book Your Appointment with Love Bridal Boutique if im right thats what you wanted it do?. if not what do you want so i can help you :smile:

Best
Ahmad

9

Hi @904TECHNOLOGY, I wanted to comment, the button that is being generated by the setmore.com service, is having styles applied to the button from the setmore code automatically, each time the button is generated.

What you will probably need to do, is to add some custom css overrides to the head of the site, to style the classes that are generated automatically by the button code, to match the styles of the pink button.

I would do the following:

  1. Identify the classes that are being generated by the setmore button. You can do this by looking at the published page with the default button and inspecting the button element in Chrome and noting the class names used.

  2. identify the styles used for the pink button you created in Webflow

  3. Create custom styles using css for the styles coming from setmore.com for the button, and set those styles to match the pink button you created in Webflow.

  4. Add the custom styles to the head of your site. Those style overrides will not appear in the designer, only after site publish.

I hope this helps to put you in the right direction. This is not super straightforward, since setmore.com does not have an easy way to change the button appearance without using some custom code on your Webflow site.

1 Like
10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.