Following the steps below we will have your button up and running in no time. Make sure to follow each step carefully. :) 

Step 1

Click the Export toolbar icon in Button Builder and you will then see this dialog box appear.  Here you will find the HTML markup that you need to add to Visual Site Designer as well as the location of all the support files that need to be uploaded with your website to make your button function.

 

Step 2:

Press the Copy to Clipboard button located under Step 1 of the Button Builder Export Dialog. This will then allow you to take this code and add it to Visual Site Designer.

 

 

Step 3:

Go back to Visual Site Designer and go to the Edit Menu and select Edit Header and paste the copied code into the Header HTML box and click OK

Optional: Visual Site Designer does not build responsive based websites by default. There is a hack that may allow your button to be responsive. But you have to add additional code in this step. 

Add the following code under the Edit > Edit Header menu. 

<meta name="viewport" content="width=device-width">

Note: this is a hack and there is no guarantees this will work for your VSD site.

 

Step 4:

Press the Copy to Clipboard button located under Step 2 of the Button Builder Export Dialog. This will then allow you to take this code and add it to Visual Site Designer.

 

Step 5

Go back to Visual Site Designer and click the Add HTML button located in the Left Hand Toolbar and click on your page where you would like the button to appear.

 

Step 6

This opens the Insert HTML window. Now enter a name to reference this HTML object in HTML Object Name field and then paste the code into the text area below the Body HTML tab.

 

Step 7

Click OK and your object will be placed on your Visual Site Designer webpage. Do not forget to size and position it where you would like it to appear on the page. 

 

Step 8:

Click Publish.

Now we need to include all of the button files with Visual Site Designer. This is where you have a few options on how you want to include the Button Builder files with Visual Site Designer.

Upload your Project

Option 1: Automatic (S-Drive):

This option is used for S-Drive and it is by far the easiest way to include your button with Visual Site Designer. Click the Open Folder in Explorer button located under Step 3 of the Button Builder Export Dialog. This will open a folder that contains all of your Button Builder files.

 

PLEASE READ CAREFULLY! Take the CONTENTS of this folder and copy them into your Visual Site Designer _website project folder. Again, only copy the CONTENTS of this folder and not the folder itself.

 

And that is it! Now publish your website to S-Drive and your button files will automatically be included when you publish.

Option 2: Manual Upload:

You can also use any FTP program (like our Direct FTP) to upload the button files to your server. Click the Open Folder in Explorer button located under Step 3 of the Button Builder Export Dialog.

 

This will open a folder that contains all of your Button Builder files.

 

PLEASE READ CAREFULLY! Take the CONTENTS of this folder and upload them to your server and place them in the folder where your website files are located.

 

When you're done, simply Save and Publish your website to see your fancy new button in action. :)

 

Enjoy!