Step by step guide

HOW TO ENABLE YOUR SPEAK INTELLIGENCE CONFIGURATOR & WIDGET

STEP 1 – CONFIGURATOR

1
Add a new page to your website directory.
Give it a logical name. The location of this page is the redirect URL we will use in the widget.
(example: ‘/configurator.html’)
2
Inside the page, add the following code before the tag:
<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('/</script>configurator.html');});
<div id="si_configuratorContainer"></div>
* Replace ‘/configurator.html’ with your link to the new page. Don’t remove the apostrophes.
(if you are using the widget on a website with clean URLs, you will use: {configurator.init(‘/mycleanurl/’);} )
Please note:*

- If you are using WordPress, you should use jQuery(document).ready(function($) to call the function
- Page width must be at least 1400px to function correctly

RESULT

By putting the widget on a page of your website, your visitors will be able to choose a number, package and see overview of their order.
CONTINUE ON STEP 2: WIDGET

STEP 2 – WIDGET

1
Add the following code before the tag on every page that displays the widget.
(example: your homepage etc.)
<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('/</script>configurator.html?packageid=10'); configurator.showNumberWidget('','','{ "nl": "Selecteer", "en":"Select", "fr": "fr_order" }',''); });
2
Replace ‘/configurator.html‘ with your link to the new page.
Don’t remove the apostrophes. The “packageid” is used for the package selection in the configurator after your customers clicks on the widget and continue.
(if you are using the widget on a website with clean URLs, you will use: configurator.init(‘/mycleanurl/?packageid=10/’);)
3
Copy the following code and place it on every page that displays the widget.
This will become the location of the widget.
<div id="si_numberWidgetContainer"></div>
4
Optional: change widget style.
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 note:
- Use the !important tag if you have other styles that conflict.

RESULT

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 numberin 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.
* Replace red part with link to the wanted background image/s. Don’t remove the apostrophes.
div#si_numberWidgetContainer {
padding: 25px 0;
max-width: 98vw;
min-width: 250px;
background-image: url("https://www.speakintelligence.com/wp-content/uploads/2019/04/Back2-01.jpg");
display: flex;
flex-direction: row;
height: 100px !important;
border-radius: 25px;
background-size: cover;
align-items: center;
justify-content: space-evenly;}

#si_numberWidgetContainer>span {
margin: 0 !important;
width: 250px !important;
border-radius: 25px;
box-shadow: 0 0px !important;}

#si_numberWidgetContainer button {
width: 250px;
border-radius: 25px !important;
border: none; font-family: "Lato" !important;
text-transform: uppercase;
margin: 0 !important;}

#si_numberWidgetContainer .ui-selectmenu-text {
color: #4e535a !important;
font-weight: 300 !important;
font-family: "Lato";}

#si_numberWidgetContainer>span:first-of-type {
margin-left: -25px !important;}

#mcx_prefixId-menu {
max-width: 70vw;}

@media(max-width: 838px) {
div#si_numberWidgetContainer {
height: 200px !important;
flex-direction: column; }

#si_numberWidgetContainer>span {
margin-bottom: 10px !important;}

.ui-state-default, #si_numberWidgetContainer button {
min-height: 50px; }

#si_numberWidgetContainer>span:first-of-type { margin-left: 0px !important; }}
div#si_numberWidgetContainer{
padding: 25px 0;
width: 320px;
background-image: url("https://www.speakintelligence.com/wpcontent/uploads/2017/06/SpeakIntelligenceNew-e1513698414771.png"),url("https://www.speakintelligence.com/wpcontent/uploads/2019/04/Back.jpg");
display: flex;
flex-direction:
column; height: 500px !important;
border-radius: 10px;
background-size: 130px, cover; background-position: 50% 10%, 23%;
justify-content: center;
background-repeat: no-repeat; }

#si_numberWidgetContainer > span{
margin: 8px auto !important;
width: 250px !important;
border-radius: 10px;
box-shadow: 0 0px !important; }

#si_numberWidgetContainer button{
width: 250px;
margin: 8px auto;
border-radius: 10px !important;
border: none; f
ont-family: "Lato" !important;
text-transform: uppercase; }

#mcx_prefixId-menu{
max-width: 70vw; }
div#si_numberWidgetContainer{
padding: 25px 0;
width: 320px;
background-color: #e7ebee;
display: flex;
flex-direction: column;
height: 270px !important; }

#si_numberWidgetContainer > span{
margin: auto !important;
width: 250px !important;
border-radius: 0;
box-shadow: 0 0px !important; }

#si_numberWidgetContainer button{
width: 250px;
margin: auto;
border-radius: 0px !important;
border: none;
font-family: "Lato" !important;
text-transform: uppercase; }

#si_numberWidgetContainer .ui-selectmenu-text{
color: #4e535a !important;
font-weight: 300 !important;
font-family: "Lato"; }

#mcx_prefixId-menu{
max-width: 70vw; }
CONTINUE ON STEP 3: LOGIN SYSTEM

STEP 3 – LOGIN SYSTEM

1
Add the following code before the tag on every page that displays the login system.
This step is not needed on the widget & configurator page.
<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(‘/</script>configurator.html?packageid=10’);
});
2
Replace ‘/configurator.html’ with your link to the new page.
Don’t remove the apostrophes.
3
Copy the following code and place it on every page that displays the login system.
Put code before the tag. This div will be the location of the login menu.
(also needed on the widget & configurator page)


<div id="”si_loginWidgetContainer”"></div>
4
Optional: change style.
Changes to the style can be made with the following elements in CSS:

ul#si_loginMenu
Login menu container
#mc ul#si_loginMenu li a
List item links
ul#si_loginMenu li div
List item
Please note:
- Use the !important tag if you have other styles that conflict.

Default style:
https://configurator.speakintelligence.com/Content/Widget/Login/default.css

RESULT

Your customers will be able to log in and see their orders.
They can also manage and control who will be able to log in to their account on your website.

CONTINUE ON STEP 4: PDF LOCATIONS

STEP 4 – PDF LOCATIONS

1
Download following attachments:
Please see the attachments to find the English Affiliate Instructions.

2
Place the PDF files we supplied in the directory of your website.
To help your customers get the information they need, for legal and affiliate purposes.
The location for the PDF files should be in:
English Affiliate Instructions (Renamed)
www.yourwebsite.com/Uploads/Widget_instructions.pdf
English GTC
www.yourwebsite.com/Uploads/GTC_SLA_EN.pdf

RESULT

Your customers will be able to see widget instalation instructions.
They can also read and confirm GTC before they proceed to order.

CONTINUE ON OPTIONAL STEP 5: LANGUAGE SYSTEM

STEP 5 – OPTIONAL: LANGUAGE SYSTEM

1
Add the following code before the tag on every page that displays the language system.
Because the language system uses the same system as the login and widget, we just have to add a
line of code in order to enable the language system.

<div id="”si_languageWidgetContainer”"></div>
2
If you use another system, make sure to add “?lang=en” for english pages
(or: “?lang=nl” for dutch pages, ?lang=es” for spanish pages etc.)
This is needed to show the login system what kind of language the customer is reading the website
in, it reads the lang parameter from the previous page.
(example: www.yourwebsite.com/configurator.html?lang=en)
3
Optional: change style.
Changes to the style can be made with the following elements in CSS:

ul#si_si_languageMenu
Language menu container
ul#si_languageMenu li a
List item links
ul#si_languageMenu li div
List item
Please note:
- Use the !important tag if you have other styles that conflict.

Default style:
https://configurator.speakintelligence.com/Content/Widget/Login/default.css

RESULT

Your customers will be able to switch languages and see the configurator, ordering process and accounts in their preferred language.