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 </body> tag:
    Copy to clipboard<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>

    *

    Copy to clipboard<script>$(document).ready(function(){configurator.init('/configurator.html');});</script>
    Copy to clipboard<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.

generator result

Step 2 – widget

  1. Add the following code before the </body> tag on every page that displays the widget.
    (example: your homepage etc.)

    Copy to clipboard<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>
    Copy to clipboard<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. 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.

    Copy to clipboard<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.

Widget example:

*

Copy to clipboarddiv#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; } }

* Replace red part with link to the wanted background image/s. Don’t remove the apostrophes.

More styles:

*

Copy to clipboarddiv#si_numberWidgetContainer{ padding: 25px 0; width: 320px; background-image: url("https://www.speakintelligence.com/wp-content/uploads/2017/06/SpeakIntelligenceNew-e1513698414771.png"),url("https://www.speakintelligence.com/wp-content/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; font-family: "Lato" !important; text-transform: uppercase; }#mcx_prefixId-menu{ max-width: 70vw; }

* Replace red part with link to the wanted background image. Don’t remove the apostrophes.

Copy to clipboarddiv#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; }

Step 3 – login system

  1. Add the following code before the </body> 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(‘/configurator.html?packageid=10’);
    });</script>

  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 to prioritize your own CSS style

    Deafult 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.

login result

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.

gtc result

Step 3 – optional: language system

  1. Add the following code before 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 to prioritize your own CSS style

    Deafult 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.

language result

All you need for your online customer communication shop

See how easy and fast the SpeakIntelligence service works

Schedule your Demo