Customer settings

From Search+ Wiki
Jump to navigation Jump to search

General

In this section are located the settings which affect all features of the service, like CMS, explicit input selectors, initial delay and other.


CMS

Most of the websites are based on a Content Manage System (like WordPress or Joomla).

The different CMS systems have pre-defined names of the controls which we are inrterested in. This could speeed and improve the service initialization and functioning.

Choose the one you use or "Other" if you do not know or you do not use one.

Search box selector

CSS selector of the search box.

If there are multiple search inputs, use comma to separate the different elements.

Input box CSS selector
CSS Description Comment
input[name="s"], #input-search We have two inputs boxes - one with name "s" and one with id "input-search"

Search button selector

CSS selector of the search button.

If there are multiple search inputs, use comma to separate the different elements.

Input box CSS selector
CSS Description Comment
button[name="s"], #input-search We have two inputs - one with name "s" and one with id "input-search"

Search box blacklist selector

A comma sperated CSS locators of the inputs which have to be explicitely excluded from the search box candidate list.

Search button blacklist selector

A comma sperated CSS locators of the inputs which have to be explicitely excluded from the search button candidates list.

Initial delay

Time to wait (in milliseconds) before executing the Search+ code.

Word suggestions

In this section are located the settings which affect the Word Suggestions (a.k.a. "Did You Mean?") feature of the service.

Enabled

If the feature is enabled, word suggestions will show after query.

Placement

Determines where the widget should be inserted.

  • Box - immediately after the input itself.
  • Owner - ate the end of the element, owning the search input.

Label text

Text to be shown befor the suggestions list. The default is "Did You mean?"

100

The label text in https://aseia.org.

Suggestion color

Color for the suggestions.

Label color

Color for the suggestions label.

Horizontal padding

TBA

Vertical padding

TBA

Add the horizontal padding to the automatic evaluation

If enabled, the value of the Horizontal padding will be added to the calculated value instead of replacing it.

Add the vertical padding to the automatic evaluation

If enabled, the value of the Vertical padding will be added to the calculated value instead of replacing it.

Explicit positioning

Explicitluy specify the positioning of the microphone div. Awolled values are:

  • Absolute
  • Relative

Here is a good article for CSS positioning.

Explicit CSS

Allows to override the entire position construction logic for the word suggestions div.

There is a way to apply dedicated CSS dedicated to specific controls and/or conditions - please, consult the CSS augmented syntax documentation.

Explicit mobile CSS

Allows to override the entire position construction logic for the word suggestions div, if the page is shown on a mobile device.

There is a way to apply CSS, dedicated to specific controls and/or conditions - please, consult the CSS augmented syntax documentation.

Type ahead

In this section are located the settings which affect the Type Ahead (a.k.a. "Autocomplete") feature of the service.

Enabled

If the feature is enabled, word suggestions will show when typing the query.

Placement

Determines where the Search+ widget should be inserted.

Box - immediately after the input itself. Owner - ate the end of the element, owning the search input.

List color

Background color for the drop-down list with word auggestions.

The default is: White (html code #ffffff).

Display the list after number of characters

How many chareacters the user must type before the suggestions list gets displayed.

The default is: 1, i.e. the list is being shown after the first character is being entered.

List opacity

The list can be transparent in order to do not cover important UI elements.

The default is 9.8.

Number of items in the list

How many suggestions should the list contain?

The default is: 5

List Z-index

The Z-Index allows elements to stack on each other.

Increase the value if some other element shows on top of the suggestions list.

Horizontal padding

TBA

Vertical padding

TBA

Add the horizontal padding to the automatic evaluation

If enabled, the value of the Horizontal padding will be added to the calculated value instead of replacing it.

Add the vertical padding to the automatic evaluation

If enabled, the value of the Vertical padding will be added to the calculated value instead of replacing it.

Explicit positioning

Explicitluy specify the positioning of the microphone div. Awolled values are:

  • Absolute
  • Relative

Here is a good article for CSS positioning.

Explicit CSS

Allows to override the entire position construction logic for the microphone div.

There is a way to apply dedicated CSS dedicated to specific controls and/or conditions - please, consult the CSS augmented syntax documentation.

Explicit mobile CSS

Allows to override the entire position construction logic for the word suggestions div, if the page is shown on a mobile device.

There is a way to apply dedicated CSS dedicated to specific controls and/or conditions - please, consult the CSS augmented syntax documentation.

Transliteration

In this section are located the settings which affect the Type Ahead (a.k.a. "Autocomplete") feature of the service.

Enabled

If the feature is enabled, transliteration will be applied to the input text upon submit.

To language

Target language for the transliteration.

Dictation

In this section are located the settings which affect the Dictation (or "Voice Recognition") feature of the service.


Enabled

If the feature is enabled, a microphone will apear within the search boxes of the page. It will allow the customer to dictate his query instead of typing it.


Show icon in non-compliant browsers

When the browser or the device do not support voice recording, the Dictation functionality is not available. In this case, there are two options:

  • Do not display the micriphone at all (default)
  • Display an image of disabled microphone, which is purely informative and do not trigger anything

Default language

The default language to be used when transcribing speech to text.

Currently, the supported languages are:

Supported languages for voice recognition
Language Code Comment
Bulgarian bg-BG
German de-DE
English en-US
French fr-FR
Spanish es-ES

(with the time, we will extend this list)

This setting will be used, if Dynamically obtain the language from the page is off.

Dynamically obtain the language from the page

Useful for websites which support multiple languages. The language for the voice recognition is obtained from the page itself. If the information is not available, the Default language will be used.

Recording duration

How long should be the voice sample taken from the customer's browser. The default is 3 seconds.

Microphone image

The image to be used for recording trigger.

Microphone images
Name Normal ON Busy Disabled Empty Comment
default-gray
Default-gray.gif
Default-gray-on.gif
Default-gray-busy.gif
Default-gray-disabled.gif
default-white
Default-white-busy.gif
Default-white-disabled.gif

Image size

Size of the microphone image which will trigger the recording. The default is 24px (fits well in a typical search box).

Image sizes example
Size Preview Comment
24
Mic.png
32
Mic.png
64
Mic.png
128
Mic.png

Just for case, the images on stock are 512x512.

Mobile image size

Size of the microphone image which will trigger the recording on mobile devices. The default is 24px (fits well in a typical search box).

Fade-in the microphone

Ifenabled the microphone will be displayed with a fade-in effect. Otherwise it will simply 'pop' when the page is loaded.

Fade delay

Delay (in milliseconds) before start fading the microphone. The default is 600ms.

Fade duration

Time (in milliseconds) to blend-in/out the microphone. The default is 1000ms.

Submit after dictation

Submit the search, if the voice recognition is successfull.

This feature works only if the search input is to be submitted via a form.

Submit after dictation on mobile

Submit the search, if the voice recognition is successfull on mobile devices.

This feature works only if the search input is to be submitted via form.

Microphone button

There are 2 modes for the microphone button:

  • Aways visible - the microphone icon is visible all the time and activated when clicked
  • By mouse - the microphone icon is hidden an shows (and acitvates) obly when the mouse button is down

Icon placement

This setting determine where to inject the microphone html:

  • Owner - the insertion place is calculated based on the elment which contains the search box
  • Box - the html is inserted immediately after the search box

Padding from left

Offset from the left side of the container. The value of this setting (if present) will translate to the left CSS property.

Padding from right

Offset from the right side of the container. The value of this setting (if present) will translate to the right CSS property.

Padding from top

Offset from the top side of the container. The value of this setting (if present) will translate to the top CSS property.

Padding from bottom

Offset from the bottom side of the container. The value of this setting (if present) will translate to the bottom CSS property.

Add the horizontal padding to the automatic evaluation

If enabled, the value of the Horizontal padding will be added to the calculated value instead of replacing it.

Add the vertical padding to the automatic evaluation

If enabled, the value of the Horizontal padding will be added to the calculated value instead of replacing it.

Explicit positioning

Explicitluy specify the positioning of the microphone div. Awolled values are:

  • Absolute
  • Relative

Here is a good article for CSS positioning.

Positioning engine

TBA

Explicit CSS

Allows to override the entire position construction logic for the microphone div.

There is a way to apply CSS, dedicated to specific controls and/or conditions - please, consult the CSS augmented syntax documentation.

Explicit mobile CSS

Allows to override the entire position construction logic for the microphone div ig the page is shown on a mobile device.

There is a way to apply dedicated CSS dedicated to specific controls and/or conditions - please, consult the CSS augmented syntax documentation.

Explicit input indexes

When scanning the page for search inputs, the algorithm generates a list, ordered by likehood. This setting allows to specify which inputs to pick. If the page contains more than on search box, use comma to separate the candidates.

In order to see the list of candidates the #Provide debug output option must be enabled. Than look for a statement like:

[locate.input]: enumetating inputs with their scores:

What follows is a list (one entry by line) of scores and signatures of inputs. The first element is with index 0.

Inputs list.png

A browser with open console, showing the inputs list.

Explicit mobile input indexes

When scanning the page for search inputs, the algorithm generates a list, ordered by likehood. This setting allows to specify which inputs to pick. If the page contains more than on search box, use comma to separate the candidates.

In order to see the list of candidates the #Provide debug output option must be enabled. Than look for a statement like:

[locate.input]: enumetating inputs with their scores:

What follows is a list (one entry by line) of scores and signatures of inputs. The first element is with index 0.

Inputs list.png

A browser with open console, showing the inputs list.

Do not show the in-box microphone icon

Loads the dictation code, but prevents the microphone icon from showing inside the search boxes. This is useful in the cases where there fixed microphone is enabled or some custom integration, shuch as the supegift.bg case.

Enable the fixed microphone

The fixed microphone is an alternative to the one shown in the search boxes.

Since it is bigger and in a fixed fixed position it is easier to find and more convenient.

An example of a fixed microphone is available at our package page:

Fixed mic.png

Fixed microphone image

Here you can select how your fixed microphone looks.

Align the fixed microphone image

This input allows to quickly align the fixed microphone button by sticking it to your screen. If you need more options (like the ability to position the microphone at the center of the page) you need to switch to advanced view and use the padding settings.

Fixed microphone image size

The size of the fixed microphone image (in pixels). The default is 75.

Fixed microphone fade duration

The fade duration for the fixed microphone (in milliseconds). It is a nice effect to be a bit slower than the in-box microphone.

Fixed microphone padding from left

Space between the left side of the page and the fixed microphone (in pixels).

Fixed microphone padding from right

Space between the right side of the page and the fixed microphone (in pixels).

Fixed microphone padding from top

Space between the top side of the page and the fixed microphone (in pixels).

Fixed microphone padding from bottom

Space between the bottom side of the page and the fixed microphone (in pixels).

Custom words

This feature allows customers to enter theit own words, which are to be used in the words suggestions feature. It is especially usefull for shops, where the owners to not need general words, preferring their customer to have choice of words from their inventory only.

Native languages

All-purpose word lists for the spoken languages around the world. We aim to support all witten languages in the planet at some point.

You can hve both any number of native languages and custom words enabled.

Advanced

This section contains advanced settings which affect all features of the service.


Report usage

Reports the usage back to the server. This option is required to be enabled in order to show statistics and show recommendations to the customer (the website owner).

Customer statistics.png

Statistics, showing the recently searched keywords.

Provide debug output

Outputs information about the client activities in the browser's console. The console is visible only if the user explicitly displays it and will not affect the general audience of a web site.

Browser console.png

A browser with open console, showing SearchPlus debug output.

Disable the service

Aborts the execution of the Search+ code immediately after the settings are loaded. Applicable for maintenance or emergency issues.