Table of contents
- Forgot Password
- Functions to control the digitizer
- Creating a new Selector
- Opening an existing Selector
- Create a question tree
- Configure response options
- Add additional questions
- Overview Questionnaire Configuration: Link Backend & Frontend
- Create pages
- Conditionalities: Branches of the question tree
- Images & Icons
- Checklist: Adding or modifying questions afterwards
- Result page
- Setting up sections
- No Result Page
- Contact from
- Thank you page
1. First Steps
To manage your digitizer simply go to https://digitizer.app. In order to access your selectors or create a new selector you have to log in first. Normally, you should have received the login information in advance by e-mail or directly from your personal contact person.
Note: You only have access to the selectors which you have personally activated and which correspond to your license model.
If you forgot the password, you can simply reset it in the login area:
Functions to control the digitizer
All important functions to control the digitizer can be found in the navigation area on the left side:
1) Create a new selector
2) Open an existing selector.
3) Adjust the general settings of a selector
4) Create a questionnaire
5) Define incompatibilities between response options
6) Set translation for other languages
7) Upload / customize products
8) Define matrix for algorithm configuration
9) Manage data sources (e.g. for sales control)
10) Configuration of Sales Outsorting
11) Configure algorithm (expert mode)
In addition, there are further menus for saving and displaying the current selector:
13) Save current settings
14) Open existing selector
Creating a new selector
To create a new selector, click on the button "Create New Selector" or "New Selector".
Opening an existing Selector
Existing selectors can be opened via the "Load Existing" or "Load" button. Pick the respective selector in the opening pop-up and load it by clicking on "Accept". The desired selector can also be searched using the "Filter" function.
2. General Settings
The general display of the selector in the front end is defined by the "settings" button in the menu. Here you should first set the general selector name. Afterwards you can set the standard language, contact data and the theme.
1) Definition of the meta name of the selector
2) Set the default language of the selector
3) Enter Google Analytics ID
4) Enter your e-mail address for contacting
5) Set default path for used images
6) Switch for deactivating the general start page
7) Selection of the design template
8) Set primary color as hex code, e.g. buttons or headings
9) Set secondary color as hex code, e.g.: background colors for input elements
10) Set background color (as hexcode)
11) The CSS Editor offers the possibility to use CSS Styles and therefore create an individually designed selector.
12) The label for the "Next" button
13) The label for the "Skip" button
14) The label for the "Restart" button
15) Display name of the selector
16) Contents of the result email
17) Subject of the result email
18) The label for the "Back" button
19) Deleting the selector
3. Create a questionnaire
Create a question tree
A question tree can be generated by using the menu item "Questionaire".
Click on the button "New page" and fill in the necessary fields.
1) Icon URL: Upload an icon matching to the question
2) Page Title (Topic): Define the title of the page.
3) Page Subtitle: Define the subheading of the page.
4) Page Explanation: Set Add an explanation to the page
5) Page URL: Configure the URL of the website
Question configuration (multiple questions per page possible)
6) Delete the question (Choice)
7) Type: Configure the input method for the user's answers.
- Buttons: Einfache Buttons zur Auswahl einer Antwortmöglichkeit, Varianten mit und ohne Bilder möglich
- Checkboxes: Checkboxes with and without images to select one or more answer options
- Double Switch: Simple switch for YES/NO responses
- Slider: Slider to set a value within a defined value range.
- Text Fields: Input field for texts and numbers
- Number Fields: Input field for numbers
- File Upload: Upload possibility (Please contact us before use)
8) Template: Set a template for input type (e.g. button with/without images)
9) Required: Set question optional (skip button appears) or mandatory
10) Question Title: Define the title of the question
11) Question explanation: Give further information for filling in the question.
Configure response options
If the input type of a question is defined sufficiently, the different choices (button label) can be added via the "Add Answer" button. Depending on the selected type/template, you can also add images (Image URL) to the answer options (Image Caption).
Add additional questions
The button "Add choice" can be used to add another question to the existing page. Currently no additional text can be set for further questions.
Overview Questionnaire Configuration: Link between Backend & Frontend
After the first page has been created using at least one question and the respective answer options, the next page of the questionnaire can be created by clicking on the "New page" button. This works identically to the first page. Small arrows help to navigate between the different pages.
Conditionalities: Branches of the question tree
To control the question tree, you can define conditionalities when you create a question. This is done via the button "Manage". It can be used to specify that a question should only be shown if a specific answer has been selected before. The corresponding answer(s) can be determined with "Pick Answer". (Only show this page if "Answer X" has been selected).
With conditionalities you are able to create an individual question tree and therefore precisely fitting results
Images & Icons
Tips for working with images and icons in the digitizer:
- The images should have a resolution of at least 72dpi, as this is the optimal size in web and avoids long loading times.
- Thereby, different formats are suitable. JPEG files are used for normal images. For graphics, PNG files with a transparent background should be selected in order to prevent unnecessary borders.
- Vector graphics are usually recommended for icons.
- Images for questions should be of the same format, our recommendation is to work with square images.
- Currently it is not yet possible to load images directly into the digitizer. Instead any images from other sources can be used. Please note that you are responsible for the licenses needed in order to use the images.
Checklist: Adding or modifying questions afterwards
In order to add another questions afterwards simply go to "Questionnare" and click on "New Page" to create a new page with a new question or "Add choice" to insert another question on an existing page. After editing the answer options, it is important to configure the algorithm by adjusting the matrix
- Creating or customizing a question
- Configuring the Matrix
- Testing the results
4. Product upload – Products
In order to receive an customized product recommendation at the end of the completed questionnaire, the various products must be uploaded under the menu item "Products". If no interface is defined, an upload of a CSV file can be used here.
The columns in the CSV can be named as desired, but the id (product ID) must be set in the first column. In addition, the field "product name" must be given to be displayed in the matrix.
The result page can be customized to a certain degree as shown in section 3.7. The columns with the respective contents, which have been defined in the CSV file, can be selected and assigned within the selector in the row "DataSource Column":
For the descriptions of benefits and shortDescription clearly formatted HTML code can also be used (e.g. "<ul> <li>text1</li><li>text2</li></ul>" for bullet points).
The created Excel file has to be saved in CSV format and imported.
A CSV file can be saved in UTF-8 character code as follows:
1. Open a blank Excel file
2. Under "Data" click on "Off Text/CSV
3. Select and open the respective Excel with the products
4. Click on Loading in the import window
5. Save as CSV UTF-8
You can upload your file with the button "Import product data". It is necessary to save the CSV file with the character code UTF-8 and to use a semicolon as separator.
The settings for the database in the dialog window can be simply applied. A preview then displays an overview of the imported data. These can be filtered and searched based on the columns they contain.
A click on Import completes the process. The following dialog shows how many records were imported and if there were new products or a product update. To update already existing products, a new file can be simply imported, the matching is done by the column ID.
Language-based product upload
The import of translations for products also follows the process described above.
ATTENTION: However, in order to not overwrite the previously added product data in the default language, the appropriate language must be selected under "Product Data Language" before uploading. Only then the product data can be uploaded in a new language.
5. Configuration of the Result-, No Result-, Thank You-Page and Contact Form
Under the menu item "Questionnaire" you can configure the result page by clicking on "Result Page". There you can define the title, the heading, the number of product columns on the result page, etc.
Overview of the Results Page Configuration: Link between Backend (Left) & Frontend (Right)
Setting up sections
As shown above, various sections can be set up on the results page, such as a download section or label section.
On the results page, an unlimited number of download sections with max. 8 attachments can be added to each product. In the download area you can add for example instructions, technical data sheets, etc.
You can configure the download section by clicking on "Configure Columns", see right:
Beforehand you must set the corresponding columns in the CSV file (see also 4.1 Product upload), which contain the URLs to the attached files in the download area:
These can then be selected under Download at "First URL Column" etc. Further attachments can be added by clicking on the plus symbol (see below).
Under "First URL Column" the column must be selected which contains the URL to the attached file.
Under "First Name Column" you can select the column that contains the name of the attached file.
For each product individual attachments with individual names can be set, e.g. "Sheet A-600" or "Sheet B-600". ATTENTION: If nothing is set under "First Name Column", the name set under "First Fallback Name" will be used.
On the results page, four labels / icons can be added to each product. The label section can be selected under "Configure Columns".
The corresponding columns containing the URLs to the labels must also be set in the CSV file before the product upload. The configuration is identical to the download section (see above).
1) Show the contact form if no matching results were found
2) Page heading if no matching results were found
3) Top text, if no matching results were found
4) Center text if no matching results were found
5) Bottom text if no matching results were found
Under the menu item "Questionnaire" you can create the contact form by clicking on "Form Page". Simply click the button "New Form Field" and fill in the required fields. Similar to the questionnaire, different types of input fields can be used here. Form fields can be optional or mandatory.
1) Title of the contact form
2) Form page top text
3) Form page bottom text
4) The label for the "Send" button
Example Contact form:
1) Name displayed in the form
2) Technical name (may be required for lead control)
3) Selection of the field type (e.g. text, e-mail, checkbox, etc.)
4) Required: Switch between mandatory and optional field.
Thank you page
Under the menu item "Questionnaire" you can configure the thank you page by clicking on "Thank You Page".
Example Thank you-Page:
1) Title of the thank you page
2) Text of the thank you page
3) Add explanations to the contact person
4) Contact picture URL: Upload picture of the contact person
5) The "label" of the contact
6) Name of the contact person
7) Position of the contact person
8) Telephone number of the contact person
9) E-mail of the contact person
10) The "label" of the contact (centered)
11) Contact picture URL: Image of the contact person - (positioned in the center)
12) Telephone number of contact person (centered)
13) Contact person's e-mail (centered)
14) Name of the button
15) URL of the button
Incompatibilities can be used to determine answers or answer groups that are not compatible with each other. This allows the question tree to be controlled in even more detail than via conditionalities. In the case of conditionalities, entire pages are defined to be displayed only for certain conditions, whereas incompatibilities refer only to specific answers: If, for example, answer "A" is selected for question 1, then answer "B" is grayed out for question 2 and can no longer be selected.
Incompatibilities can be set by clicking on "New Group":
7. Matrix – Configuration of the algorithm
In order to assign the different products to the respective selection options, a meaningful matrix must be created. For this purpose, values in the range from 0 to 1 are assigned to the different options.
A distinction between 0/1 corresponds to a normal filter logic. Values between 0 and 1 (for example, 0.4) can be used to define a scoring logic. This allows you to control the display order on the results page.
8. Translation function
Under the menu item "Translations" the selector can be translated into different languages. Translations can be set for all questions and input fields. The left column shows the source language (usually the default language) and in the right column the corresponding translations are entered. It is important to ensure that the "Translate from" and "Translate to" fields are set correctly.
Translations can also be entered as CSV files via the "Import" button or downloaded via the "Export" button.
Multilingualism can be used in the digitizer by manually adjusting the URL parameter. In the path, the language code, e.g. "de_DE", must be changed to the language code of the desired translation, e.g. "en_EN".
9. Data sources
Additional data sources can be created under the menu item "Data Sources". Data sources can be used in many ways, for example to define the lead control more precisely. In the future you will find examples how this function can be used.
Data sources can also be easily updated by clicking the refresh button. A dialog box appears with a warning that the current data sources will be irrevocably overwritten.
Lead management via CRM-System
Under the menu point "Lead", you can set the interfaces to your CRM systems and lead management. Lead management can be routed to a CRM system. In order to connect to your CRM an action by FoxBase is currently necessary - please do not hesitate to contact us. To set up the lead management click on "New Lead Config" in the "Lead" section.
Set up a CRM-System:
- URL of the CRM system for the contact request.
- Here you set the button for which the lead configuration should be used.
Leadmanagement via e-mail
In order to configure the lead management via email, click on "New Mail Config" in the "Lead" section.
- Name of the sender
- Here you set the button for which the mail configuration should be used.
- Selection of the SMTP user
- Selection of the subject of the contact request (default: request_notification_mail_subject)
- Selection of the mail content of the contact request (default: request_notification_mail_body)
- Possibility to add an attachment: If attachment is activated, a PDF file with the entries and results will be created and send via e-mail. The respective template must be created and the URL to the template entered under "Send attachments".
Note for mail configuration:
Currently, a standard SMTP user is possible for each selector, we are also happy to create a separate user for you - please do not hesitate to contact us. In addition, only the sending of standard templates is currently possible, for your own templates please contact us. In the near future it will be possible to configure your own templates.
Example of a contact request via mail:
- The personal contact details are retrived from the entries in the contact form
- These are the customer results generated from the selector
Leads with PDF attachment
If the "Send attachments" field is activated, a PDF file with the entries and results is automatically created when the contact request is made. The structure and design of the PDF file can be completely customized. An example can be found below. The template of the PDF file must be saved as .fodt file.
In order to edit the PDF-file and save it in the correct format (.fodt-file) the program LibreOffice is required.
A template of the PDF can be downloaded HERE:
- Open link
- Right click "Save as"
- Save in .fodt format
- Open and edit a file with LibreOffice
In addition, the dispatch of the PDF can be differentiated according to the language. First, a CSV file must be uploaded, which assigns the respective language to the corresponding PDF in the selected language. The CSV file must then be uploaded under "Data Sources" (see point 7).
The CSV file has a relatively simple structure, the columns must be named as follows to be able to assign them: "lang" and "url".
In the next step you can specify the language of the sent PDF.
In this case: If the selected language (chosen_language) equals the language in the data source uploaded under "Data Sources" (Source: pdf_lang), then the PDF stored behind the URL (Column url) is called up.
Example of a contact request with PDF file:
You can choose your own algorithm here, if we have developed one for you. We usually do this for large product portfolios or if we have introduced an automated connection to a PIM system. For the standard case the algorithm "matrix" should be selected.
Under "Special fields" in the field "Recommended Product Amount" you can define the maximum number of products to be displayed on the result page. We recommend to limit the number to three products.
12. Embedding the selector
The selector can be integrated in any website or landing page or in a CMS. To embed the selector (e.g. as WordPress plugin, Jimdo extension, etc.), please use the code below:
data-selector-id="ID DES SELEKTORS"
The selector will appear where the code snippet was inserted.
All parameters, except the data-selector-id, are optional, shortened version:
data-selector-id="ID DES SELEKTORS"</script>
Explanation of the parameters:
- data-selector-id: The ID of the selector must be inserted here. The selector ID can be found among others in the URL:
- data-scroll-adjust: Here you can set the distance to the Header. Ideal for floating headers.
- data-lang: This parameter can be used to specify the language (if translations are available).
Example of integration in WordPress: