Step 2 - Widget

By putting the widget on a page of your website, your visitors will be able to select the country they would like to order a number in and the number type.

When choosing the number type, a short but clear explanation of the available number types is included in the widget.

It is possible to place the widget anywhere on your website and adjust the CSS (look and feel) according to your wishes.

1. Add the following code before the </body> tag on every page that displays
the widget, for example your homepage.

<script src="https://configurator.speakintelligence.com/Scripts/jquery-2.1.4.min.js"></script>
<script src="https://configurator.speakintelligence.com/Scripts/jquery-ui-1.11.2/jquery-ui.js"></script>
<script id="si_widgetJs" type="text/javascript" src="https://configurator.speakintelligence.com/Scripts/Widget/configurator.min.js"></script>

<script>$(document).ready(function() {
configurator.init('/configurator.html?packageid=10');
configurator.showNumberWidget('','','{ "nl": "Selecteer", "en":"Select", "fr": "fr_order" }','');
});
</script>

2. Replace ‘/configurator.html’ with your link to the new page, don’t remove
the apostrophes. For example, if you are using the widget on a website with clean URLs, you will use:
configurator.init('/mycleanurl/?packageid=10/');

The “packageid” is used for the package selection in the configurator after your customers clicks on the widget and continue.

Please note: If you are using Wordpress, you should use jQuery(document).ready(function($) to call the function.

3. Copy the following code and place it on every page that displays the
widget, before the </body> tag. This will become the location of the widget.

<div id="si_numberWidgetContainer"></div>

4. Changes to the style can be made with the following elements in CSS:

#si_numberWidgetContainer	Widget Container
#mcx_orderId	Selection Button
#mcx_countryId	First dropdown with Country
#mcx_prefixId	Second drowndown with Prefix

Please use the !important tag if you have other styles that conflict.