Membuat Web Travel dari Affiliate Wego White List

Kalau punya web ataupun niche berbau travel mungkin bisa nyobain affiliasi wego white list. Keunggulan, tampilan keren dan kita tidak dipusingkan dengan extreme coding (seperti halnya menggunakan API). Kekurangan, title dan Meta tag STATIS, Akan tetapi teknisnya bisa diakalin lewat jquery (sayang untuk yang satu ini saya gagal faham).

Untuk demo, saya sendiri sudah membuatnya dengan menempatkan beberapa element tambahan. Silahkan cek disini http://booking.crotreview.net/
dan ini penampakan aslinya: http://travel.superstore.travel/

Sekilas tentang Wego
Wego memberikan informasi perbandingan harga hotel dan tiket pesawat yang diambil dari web-web travel terkenal (global) dan menampilkannya dalam satu halaman sehingga user bisa memilih dengan harga terbaik.

Jika masih kekeuh ingin membuatnya, mari kita persiapkan segala sesuatunya

Yang dibutuhkan:

• Harus jadi affiliate wego dulu, daftar disini http://wan.travel
• Domain / subdomain (contoh diatas pake subdomain)
• Hosting (opsional, kalo pake domain utama berarti ga perlu hosting juga bisa, tinggal setting di masing-masing provider)
• Free autoresponder (opsional, bisa pake atau ngga, terserah. Fungsinya untuk lead email)
• Sedikit coding html, css, dan jquery (bisa nyontek dibawah)

Praktek

Disini saya contohkan membuat web travel wego persis seperti yang saya buat diatas, yaitu menempatkannya di SUBDOMAIN (booking.crotreview.net) sedangkan domain utamanya blog wordpress.

#1. Mengarahkan DNS subdomain dengan CNAME Record
Buka cpanel, masuk Advanced DNS Zone Editor, lalu isi datanya

Select Domain: pilih domain utamanya

Add a Record:
- Name : booking (kasih nama subdomain terserah)
- TTL: 14400
- Type : CNAME
- CNAME: www.superstore.travel
- Pencet "Add a Record"

Dan CNAME Record yang barusan dibikin akan tampil dibawah list dan proses propagasi dns ini maksimal 2x24 jam (pengalaman ga nyampe 2 jam juga udah aktif).

Kalau ingin menempatkannya di domain utama silahkan setting di provider masing-masing, misal namecheap bisa lihat contohnya disini, sedangkan godaddy, dsb silahkan googling aja :D

#2. Daftar Wego White Label Travel Site
Disini kita akan mendaftarkan subdomain diatas ke wego affiliate network. Silahkan login dulu di http://wan.travel lalu klik menu "White Label", dan tekan tombol "Create a new Travel Site". Isi parameternya seperti ini...

• Site name: Booking Hotels and Flights (ini nanti jadi default title)
• Choose application: pilih semua (Flights dan hotels)
• Default locale: en (english) atau id (indonesia) pilih terserah
• Choose supported locales: en dan id (bahasa yang didukung, makin banyak bahasa yang dipilih makin banyak setting yang nanti harus kita input, untuk itu seperti web travel diatas, saya hanya memilih 2 jenis saja yaitu en dan id)
• Default currency: USD / IDR
• Choose supported currencies: IDR dan USD
• Show currency selector: yes (pilih)
• Show locale selector: yes (pilih)
• Custom URL for your site (Help): booking.NamaDomainAnda.com (wajib isi sesuai dengan nama subdomain yang dibuat diatas)
• OR, use a subdomain under superstore.travel: JANGAN DIISI (*)

Klik tombol Submit. Siip, domain udah masuk. Perhatikan dibagian "Edit your travel Website" ada 5 tool yang disediakan, yaitu..

Settings: Menyeting ulang web travel anda
Edit theme: Mengganti warna di beberapa bagian web
Advanced: Menambahkan html, css, javascript, dll
Publish: Mempublikasikan hasil editan anda.
Preview: Melihat preview hasil editan anda.

Catatan; ada baiknya gunakan edit theme, advanced, dan preview terlebih dahulu, jika dirasa sudah ok! baru tekan publish.

#3. Edit Theme Website
Pilih "Edit Theme" dan atur warna sesuai selera.
Contoh diatas hanya merubah 4 warna saja, yaitu bagian...

- Header Font Color: #333333
- Header Background: #efefef
- Footer Font Color: #4a4a4a
- Footer Background: #ffffff
Klik Submit lalu Preview

#4. Menambahkan HTML, CSS, JQuery, dan free autoresponder.

A. Setting autoresponder
Saya menggunakan madmimi, gratis ko, silahkan DAFTAR DISINIH
Setelah itu masuk ke WebForm, kalo ga ada! cari dan install addon dulu, caranya klik tanda + (samping kanan) dan aktifin (ke posisi ON, lihat gambar)

Selanjutnya klik tombol "Add a Webform".

Buat 2 field, name dan email address lalu pilih SOI (Single Opt-In), jadi user ga perlu buka email untuk melakukan validasi. caranya klik Advanced

Yang diisi kolom Confirmation Landing Page, fungsinya setelah user sign up, mereka akan diredirect kemana? Saya pilih ke halaman awal http://booking.crotreview.net/

Dan satu lagi, Confirmation Policy: Aktifkan (Single Opt-In)
Sisanya kosongin aja, lalu Save Settings (dibawahnya).

Klik Embed untuk mengambil kode iframe dengan width 300px, dan inilah yang nanti akan kita tempel dihalaman awal web travel.

Simpan sementara kode iframe tersebut di notepad dan sekarang kita lanjut ke tahap setting html, css, javascript di web travel.

B. Pilih "Advanced"
Ada banyak kolom tersedia, dan berikut ini kodenya, silahkan di copas.

Header in EN
Ganti bagian xxxxxx pada iframe madmimi

<div class="hulu">
<div class="hulucoy"><div class="hulucontent">
<h1>Tagline in ENGLISH</h1>
<h3>Subheading in ENGLISH</h3><br/>
<iframe src="https://madmimi.com/signups/xxxxxx/iframe" scrolling="no" frameborder="0" height="292" style="max-width: 300px; width: 100%;"></iframe>
</div></div></div><div class="clear"></div>

Footer in EN

<div class="sukuhauk">
<div class="crot">
<h3>Some of the sites searches for the best flight and hotel deals:</h3>
<p>United Airline, Expedia, CheapOAir, OneTravel, Agoda, Booking, Hotels, HotelTravel, Delta, Westjet, SkyTours, HotelClub, Accor Hotel, IHG, Starwood, Hawaiian Airlines, Air Canada, jetBlue, Hilton, Hyatt, PanPacific, Marriot, etc</p>
<p><a href="#" target="_blank">About</a> | <a href="#" target="_blank">Privacy Policy</a> | <a href="#" target="_blank">Disclosure</a></p>
<p><img src="http://upload.wikimedia.org/wikipedia/commons/f/fb/Wego_Logo_Small.png" alt="wego" width="88" height="36"/></p>
</div></div>

Bottom Bar in EN
Jquery sederhana yang fungsinya yaitu, kalau user menekan tombol search maka heading akan disembunyikan dan satu lagi kalau home navigasi (hotel dan flight) di klik maka heading akan ditampilkan.

<script>
$(document).ready(function() {
$('.form-button').click(function(){
$(".hulu").hide("fade",500);
});
$('.homepage-nav').click(function(){
$(".hulu").show("fade",500);
});
});
</script>

Header in ID
Ganti lagi bagian xxxxxx pada iframe madmimi

<div class="hulu"><div class="hulucoy"><div class="hulucontent">
<h1>Tagline Dalam Bahasa Indonesia</h1>
<h3>Subheading Dalam Bahasa Indonesia</h3><br/>
<iframe src="https://madmimi.com/signups/xxxxxx/iframe" scrolling="no" frameborder="0" height="292" style="max-width: 300px; width: 100%;"></iframe>
</div></div></div><div class="clear"></div>

Footer in ID

<div class="sukuhauk">
<div class="crot">
<h3>Pencarian hotel dan tiket pesawat menjangkau ratusan situs travel, diantaranya:</h3>
<p>tiket.com, nusatrip, tiket2, arenatiket, agoda, booking.com, pegipegi, hoterip, garuda indonesia, citilink, lion air, air asia, hoteltravel.com, ticktab, hotelclub, ibis, tigerair, lufthasa, Sriwijaya Air, Singapore Airline, Novotel, Harris, Tune Hotel, dsb</p>
<p><a href="#" target="_blank">About</a> | <a href="#" target="_blank">Privacy Policy</a> | <a href="#" target="_blank">Disclosure</a></p>
<p><img src="http://upload.wikimedia.org/wikipedia/commons/f/fb/Wego_Logo_Small.png" alt="wego" width="88" height="36"/></p>
</div></div>

Bottom Bar in ID
Isi dan fungsinya sama kaya dibagian Bottom Bar in EN

<script>
$(document).ready(function() {
$('.form-button').click(function(){
$(".hulu").hide("fade",500);
});
$('.homepage-nav').click(function(){
$(".hulu").show("fade",500);
});
});
</script>

Custom CSS
CSS Style

.hulu{width:100%;text-align:center;border-top:1px solid #dedede;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy39w2HdCjgSi0C51eQNKphWSeFlLKCYxRkTtTzv5CGFBV9ruqUvMJrO87xB1tTE61Kp8a8bdtQjjl6j8iPIupU7IOvu1e4J7K95-KUbdE6TrQL-YuohBTZoetc5WBUn_R-Vv15I4wzslb/s1600/travel-deals.jpg') no-repeat fixed center top;height:550px;}.hulucoy{margin:0 auto;width:990px;}.hulucontent{width:550px;float:right;text-align:right;margin-top:20px;padding:20px;}.hulu h1,.crot h1{font-size:36px;font-weight: bold;color: #333333;}.hulu h3,.crot h3{font-size:20px;color:gray;}
.sukuhauk{background:#fafafa;margin-top:30px;border-top: 1px solid #dedede;padding:30px;}
.crot{width:990px;margin:0 auto;padding;30px;text-align:center;}.crot p{display:block;-webkit-margin-before: 1em;-webkit-margin-after: 1em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;}div.clear{clear:both;}

Head Section
Meta tag, opengraph, dan jquery js. Edit terserah

<meta name="description" content="deskripsi web"/>
<meta name="keywords" content="hotel search, flight search"/>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Best cheap flight and hotel comparison" />
<meta property="og:url" content="http://booking.NamaDomain.com" />
<meta property="og:site_name" content="Best cheap flight and hotel comparison" />
<meta property="og:description" content="deksripsi web" />
<meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy39w2HdCjgSi0C51eQNKphWSeFlLKCYxRkTtTzv5CGFBV9ruqUvMJrO87xB1tTE61Kp8a8bdtQjjl6j8iPIupU7IOvu1e4J7K95-KUbdE6TrQL-YuohBTZoetc5WBUn_R-Vv15I4wzslb/s1600/travel-deals.jpg" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Pencet lagi Submit, lalu preview kembali.. kalo udah kelar! langsung Publish

Gak punya domain & hosting, yang ada blogspot apa masih bisa ikutan jadi affiliate wego? BISA banget, dan kita masih bisa dapetin web travel seperti diatas tapi pake subdomain bawaan wego plus widget yang siap ditancepin diblog.

Caranya lihat diatas bagian #2. Daftar Wego White Label Travel Site. Isi parameternya hampir sama kecuali 2 bagian terakhir.

- Custom URL for your site (Help): JANGAN DIISI
- OR, use a subdomain under superstore.travel: tulis subdomain anda, misal jambukulutuk. Nanti hasilnya menjadi jambukulutuk.superstore.travel

Sisanya tinggal ikutin aja cara diatas.

Informasi wego white label bisa diakses melalui http://support.wan.travel/hc/en-us/articles/200300505-White-Label

Next post; Cara scrape web travel, mixing di localhost lalu import di blogspot. Hasilnya seperti ini

Semoga bermanfaat.