JS Widget integration code explained
Here is the typical example of the initialization code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/css/flag-icon.min.css"> <link rel="stylesheet" href="https://cdn.workshopbutler.com/widgets.1.16.2.min.css"> <script defer src="https://cdn.workshopbutler.com/widgets.1.16.2.en.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
We recommend placing this code between the <head> </head> tags. It can be placed anywhere else on the page, but in this case, the loading time might be affected.
There is no need to add this code to all pages, just to those where you are going to show the widget. This code should be present on the page only once even if you are using several widgets on the same page.
The first two (or sometimes three) lines of code load external fonts and icons:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/css/flag-icon.min.css">
Then the most important lines with styles and the widget code itself:
<link rel="stylesheet" href="https://cdn.workshopbutler.com/widgets.1.16.2.min.css"> <script defer src="https://cdn.workshopbutler.com/widgets.1.16.2.en.js"></script>
And finally, we load jQuery. You can omit this line if you already have jQuery on the page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>