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; }