How to use Online Ordering Form
COURSE DESCRIPTION
In this course you will learn how to set up Online Ordering Form for your country, your Card Issuers and Partners.
You will learn about all options of Online Ordering Form. Also you will be able to personalize Online Ordering Form for your Card Issuers and Online Ordering affiliate partners.
As prerequisities to this course, please take a look at our other courses “Introduction of Alive Platform”, “Ways of issuing cards” and “How to understand Serial Ranges”
WHAT IS ONLINE ORDERING FORM
Online Ordering Form is a part of the ALIVE Platform used to order ISIC/ITIC/IYTC cards online. It is the most common way how individuals order their cards. Every tenant (country) that uses ALIVE Platform, has its own Online Ordering Form. Where can you find it? The URL of your Online Ordering Form looks as follows: https://ae-online.aliveplatform.com
The URL above is an example address of the Online Ordering Form for United Arab Emirates. For your country, the only thing you have to do is to replace letters “ae” by your country code used within ALIVE Platform. For every country, test Online Ordering Form is prepared. The URL of your test environment looks like: https://ae-online.test.aliveplatform.com Exactly as in the previous example, you have to replace letters “ae” with your country code.
PARTS OF ONLINE ORDERING FORM
After going through this lesson, you will know all parts of Online Ordering Form. When ordering through Online Ordering Form, you have to pass through five steps:
1/ In the first step, you see all items that can be bought through Online Ordering Form. Below the items, short description is added. On the right side, you see price of the items in your local currency. Using the drop-down menu in the upper right corner, you can choose another language. To proceed to the second step, choose one of the items.
2/ In the second step, you have to fill your personal details into columns of the form. Some columns are mandatory (marked with asterisk), some optional.
First Name – your first name
Surname – your surname
School – schools from NCDB should already be imported into Online Ordering Form, so write only a portion of your school’s name or its address and the system will offer you the selection.
Date of Birth – select day, month and year of your birth from three drop-down menus.
National ID Number – number of your ID
Gender - you can select from “Male” or “Female” or “Other”Photo – the photo serves for visual identification of Card Holder. The photo should be larger than 300×360 px. Your face should be in the centre. The best practise is to upload .jpg photos. You shouldn’t wear sunglasses, hat etc. In most countries, it is not acceptable to upload black&white photos. After uploading your photo, a rectangle with dashed outline appears. Moving the rectangle, you can define which part of the photo will be printed on your card.
E-mail and Phone Number – these personal details are mandatory. When the order is incomplete or if there is some problem for example with the photo, ISIC team will contact you.
Documents – in most cases, you have to add Confirmation of student/teacher status and Identity Document. It is defined in NCDB, whether those documents are mandatory or optional (see later).
PDF files with watermarks and electronic signature are supported.
Important note: Across the ALIVE Platform, support for Japanese and Arabic fonts is supported. It is possible for example to put some Japanese/Arabic text into Online Ordering and after the order is approved and exported into NCDB, the text can also be printed in Batch Card Printing, using the corresponding alphabet and character set. The card holder's first and last name must always be in Latin characters.
When you choose Date of Birth, the application evaluates it. When the age is younger than a certain decisive age (which differs around the world), new section of the form will appear. Into that section, personal details of Legal representative should be added. In this part of the form, all fields are mandatory.All information about legal representative is displayed directly in the detail of card order.
3/ In the third step, you can order additional products and services. In some countries, it is possible to order travel insurance as well. To define other additional products, you have to go to Online Ordering application for a while. Go to Settings -> Products and press “Add new product” button (see picture below). Define the product that should be offered in the third step of Online Ordering Form.
4/ The fourth step summarizes the order. Check whether everything is OK and choose your favourite payment and delivery method. The payment methods that are available different for each country. If you have a Voucher code, you can insert it into the blank field and you’ll get the discount. If everything is OK and you want to pay for your order, confirm that you agree with Terms and Conditions and press “Place order”.
Vouchers: If you want to create voucher codes, go to the Discount Vouchers section and press the “Create voucher” button. You can set the behaviour of vouchers
Important: If you run orders in Online Ordering via the partner form, don't forget to choose your partner when setting up voucher codes.
5/ In the last step, you get a message with successful payment confirmation (in case you paid using card online). At this moment, the order was successfully completed and exported to Online Ordering application.
CARD ISSUER “ONLINE ORDERING“
In this section, you will learn where you can define/edit the items that are offered in your Online Ordering form. To describe this, we have to go back to NCDB for a while. Technically, in NCDB, Online Ordering is just one of Card Issuers and you can find this issuer in NCDB -> Card Issuers -> Issuer List. Find “Online ordering” issuer and go to edit mode (click the pencil icon on the right side of Card Issuers list). In the edit mode, we will focus on “Integration with Online Ordering” section.
In this window, checkbox “Integrated with Online Ordering” is checked by default (otherwise, the Online Ordering Form wouldn’t function) and you can’t change it. What you can change are the drop-down menus and other items below.
Applicant’s photo – you can specify here, whether the photo is mandatory or optional.
Required documents – you can define what documents your customer has to upload.
Custom CSS file URL – you can put an URL link to external CSS file which defines the CSS style of your form. The external CSS file description is beyond the scope of this course, but feel free to find more information on the web. Some useful examples are mentioned in section „Personalized Online Ordering form“ of this course.
In the last section of “Integration with Online Ordering” window, check the types of cards (ISIC/ITIC/IYTC) you want to offer in Online Ordering Form.
“ONLINE ORDERING” PRICE LIST
Prices that can be found in Online Ordering Form (in its first step) are defined in NCDB among other price lists. Go to Card Issuers -> Price Lists and find “Online Ordering“ price list. Go to edit mode. In “Basic details” window, define whether you want to sell Plastic or Virtual cards through your Online Ordering Form.
Next window, called “Allowed request types”, is the important one. By clicking the checkboxes, you define the items that will be offered in the first step of your Online Ordering form. The most important are:
New virtual card
New virtual and plastic card
Additional plastic card to virtual card – your customer already has virtual card and wants to order additional plastic card to it
After that, keep close attention on the last window called “Prices of requests”. Be careful to fill all fields that are relevant for your card types. The prices should be in your local currency which you can see in brackets in the heading of “Price” column.
PERSONALIZED ONLINE ORDERING FORM
Online Ordering form can be customized for every Card Issuer and every Partner in your NCDB. This way, every Card Issuer and every Partner can offer different card types through Online Ordering Form. What’s more, you can customize the appearance of Online Ordering Form as well. How to do this? Card Issuers & Partners Who is Card Issuer and who is Partner? Typically, Card Issuers are schools and other scholar associations that can order cards, issue their own cards, extend card validity etc. Partners are mostly non-scholar associations that accept cards as documents for getting benefits. The key to this lecture is called “Card Issuer ID/Partner ID“. Where can you find it? To find the ID, we have to go back to NCDB once again. For Card Issuer: Go to Card Issuers -> Issuer List. Select your desired Card Issuer and go to the edit mode (click the pencil icon on the right side of the table). At this moment, you can see the Card Issuer ID. It consists of the digits at the end of the URL, right behind the “=” sign (see the picture below).
So, the URL link for your Card Issuer will be: https://ae-online.aliveplatform.com?schoolIntegratorId=XY , where “XY” is the ID of the Card Issuer. Don’t forget to replace letters “ae” by your country code once again. Code “ae” is for United Arab Emirates only.
Last step you have to do is to update your Card Issuer profile. Go to Card Issuer and go to the edit mode again and check the “Integrated with Online Ordering” checkbox in “Integration with Online Ordering” window. Select whether Applicant’s photo, Confirmation of study and Personal ID are mandatory or optional and select the Card Types that will be issued.
Next, it is necessary to set up more details in Card Issuer profile. In “Basic details” window, select the Price List for your Card Issuer from the drop down menu. Prices from this Price List will be shown in the first step of Online Ordering Form. Below the drop-down menus, check whether “Active” and “Online Ordering enabled” checkboxes are checked. Of course, it is possible to have more checkboxes checked (e.g. NCDB issuing for NCDB orders), but it is not the aim of this course to describe this.
In “Card Settings section”, select card designs for Plastic or Virtual Cards (it depends on what type of cards your Card Issuer is going to issue). In “Roles“ window, select the correct role(s) for your Card Issuer. For Partner: Go to Partners -> Partner List. Select your desired Partner and go to edit mode (click the pencil icon on the right side of the table). At this moment, you can see the Partner ID. It consists of the digits at the end of the URL, right behind the “=” sign. So, the URL link for your partner will be: https://ae-online.aliveplatform.com?partnerId=XY , where “XY” is ID of the Partner. Don’t forget to change letters “ae” to your country code once again. Code “ae” is for United Arab Emirates only.
Last step you have to do is to update your Partner’s profile. Go to Partners -> Partner List and go to the edit mode again and check the “Online Ordering affiliate partner” checkbox in “Basic settings” window. Next, in “Online Ordering Affiliate Partner” window, select whether the card type should be Plastic or Virtual, define all prices that are relevant for your partner, and define whether your customers ID documents and Confirmation of study will be optional or mandatory. Define possible Delivery Methods and their prices as well. In “Card Settings for Online Ordering” window, select card designs and their prices. For your partners, you can define how the web page with Online Ordering Form looks like. To do this, feel free to experiment with “Custom CSS for Online Ordering Form” window. In this window, you can write some CSS code to customize the web page. If you (for example) want to change the web page background color to black, just paste the following code into CSS window: html, body { background-color: black; }
CHANGING ONLINE ORDERING FORM USING CSS
CSS (Cascading Style Sheets) is a mighty tool for changing design of webpages. As was already told in previous sections of this course, using CSS, you can change some aspects of your Online Ordering Form. Full description of CSS is far beyond the scope of this course, so below we provide only some examples how it can be used.
div.languageBox {
float: inherit;
height: your_image_height(px);
background-image: url("https://URL_of_your_image");
background-repeat:no-repeat;
background-position: left/center/right;
}
div.contentBoxContent:before {
content: "The ISIC/ITIC card is the best choice for all students & teachers!";
}
.cardSelection .cardContentHeader h2:after {
content: "AFTER";
}
Every card design is slightly different, so it can happen that after you integrate your new design into the Online Ordering Form, the lines with Card Holder name, Academic Institution Name etc. will not fit into it. To adjust this, a bit more CSS code is needed. Some examples are below. In case you for example don’t want to display Academic Institution Name on your card preview, use the following.