The RoadFS Online Scheduling feature has two methods of implementation, depending on your needs:

1. auto-generated button

2. custom button(s)

(technically you can do both simultaneously, but typically people choose one or the other)

1. Auto-Generated Button

This method allows the RoadFS-generated HTML snippet to automatically generate the button for you when it is placed on your web page.

First, in RoadFS, go to System > Schedule:

Now scroll down to the section named “Online Scheduling Widget”:

To insert the auto-generated button in your web page, click the “Copy Widget” button.  This puts the needed HTML on your clipboard.  You can then paste that HTML into a section of your website that allows for custom HTML.  The button will show up in the location that you paste the code, as shown here:

You can change the size, color and text of the auto-generated button by changing the Button size, Button color and Button text settings in the Online Scheduling Widget section. 

2. Custom Buttons

You can create one or more custom buttons (as well as other element types–see below) that open the online scheduling modal dialog.  First, in the RoadFS Online Scheduling Widget settings, click the “Copy Widget” button.  This puts the needed HTML on your clipboard.  You can then paste that HTML script element on a page of your website.  Typically, when using custom buttons, you won’t want the auto-generated button to be created.  To suppress its creation, simply uncheck the “Generate Button” check box in the RoadFS Online Scheduling Widget settings.

To create the custom button, all that is required is a button class roadfs-service-request-widget-button. If you only want to have a custom button or buttons (and not show the auto-generated RoadFS button), uncheck the “Generate Button” in the RoadFS Online Scheduling Widget settings (shown above).  Here’s an example of a custom button:

Custom Request Service Button 1

The red button above was created with the following code:

<button class="roadfs-service-request-widget-button red-button">
    Custom Request Service Button 1
</button>

Again, the critical piece is that the button has a class named roadfs-service-request-widget-button. This allows the RoadFS-provided script (a required script which can be obtained from the “Copy Widget” or “View HTML” buttons shown in the first section above) to find it and prepare it for clicking.

As mentioned, you can have more than one custom button, as shown here:

Custom Request Service Button 2

Other Element Types

You can use other element types such as <div>,<a>,<span>, etc.

ANCHOR example (click me)

SPAN example (click me)