Step by step guide

HOW TO ENABLE YOUR SPEAK INTELLIGENCE CONFIGURATOR & WIDGET

STEP 1 – CONFIGURATOR

1
CNAME implementation.
To avoid cross domain browser limitations configure own hostname "configurator.[yourdomein.com]" as CNAME to "configurator.speakintelligence.com". Once done, notify SpeakIntelligence via partners@speakintelligence.com so the ssl certificate can be created.
2
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’)
3
Inside the page, add the following code between the <HEAD>and </HEAD> tag
<script type="text/javascript" src="https://configurator.[yourdomain.com]/Scripts/jquery-2.1.4.min.js"></script><script type="text/javascript" src="https://configurator.[yourdomain.com]/Scripts/jquery-ui-1.11.2/jquery-ui.js"></script><script id="si_widgetJs" type="text/javascript" src="https://configurator.[yourdomain.com]/Scripts/Widget/configurator.min.js"></script><script>$(document).ready(function() { configurator.init('/configurator?packageid=10');});</script> <!-- On a website with SEO-friendly URLs, you will use: {configurator.init(‘/mycleanurl/’);} ): -->
Replace '[yourdomein.com]' with your actual domain.
Inside the page, add the following code after the <BODY> tag
<div id="si_configuratorContainer"></div>
Please note:
- If you are using WordPress, you should use jQuery(document).ready(function($) to call the function

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 between the <HEAD> and </HEAD> tag on every page that should display the widget.
(example: your homepage etc.)
<script type="text/javascript" src="https://configurator.[yourdomain.com]/Scripts/jquery-2.1.4.min.js"></script><script type="text/javascript" src="https://configurator.[yourdomain.com]/Scripts/jquery-ui-1.11.2/jquery-ui.js"></script><script id="si_widgetJs" type="text/javascript" src="https://configurator.[yourdomein.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 '[yourdomein.com]' with your actual domain.
3
Copy the following code and place it on every page that displays the widget after the <BODY> tag.
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 between the <HEAD> and </HEAD> tag on every page that displays the login system.
This step is not needed on the widget & configurator page.
<script type="text/javascript" src="https://configurator.[yourdomain.com]/Scripts/jquery-2.1.4.min.js"></script><script type="text/javascript" src="https://configurator.[yourdomain.com]/Scripts/jquery-ui-1.11.2/jquery-ui.js"></script><script id="si_widgetJs" type="text/javascript" src="https://configurator.[yourdomain.com]/Scripts/Widget/configurator.min.js"></script>
2
Replace '[yourdomein.com]' with your actual domain.
3
Copy the following code and place it on every page that displays the login system.
Put code after the <BODY> 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 after the <BODY> 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.