Jak wdrożyć video ofertę z pojawiającym się przyciskiem zamowienia

Amerykanie zachwycają się ostatnio ofertami VIDEO, którymi coraz częściej zastępują oferty pisane, lub o które wzbogacają oferty pisane. Wygląda to w ten sposób, że na górze oferty znajduje się kilku-kilkunastominutowe video, w którym autor produktu opowiada o nim i zachęca do jego zakupu. Video ma albo format nagranych (np. Camtasia) slajdów, albo jest to video typu "talking head", na którym widzimy autora produktu. Oferty nagrane na video mają kilka zalet:

1. Są łatwiejsze do przygotowania, bo łatwiej jest coś powiedzieć,
2. Mówienie pozwala nam na więcej niedoskonałości, które w tekście pisanym mogłyby razić,
3. Video jest na topie dzięki takim serwisom jak YouTube - coraz więcej ludzi lubi video

Video ma też wady:

1. Czytanie jest szybsze niż słuchanie
2. Tekst pisany możemy skanować w poszukiwaniu interesujących nas fragmentów, video musimy przesłuchać całe, lub skakać po fragmentach szukając tego, co nas interesuje (nie zawsze taka opcja jest możliwa)
3. Jeśli w ofercie jest tylko video i formularz zamówienia, Klient może zbyt szybko podjąć decyzję na podstawie ceny.

Tą 3 wadę rozwiązuje technika pozwalająca na zsynchronizowanie formularza z video. Idea jest taka, aby pokazać link do formularza zamówienia lub cały formularz dopiero, gdy w video zaczniemy mówić o cenie - czyli po całym wstępie. Aby to zrobić, możemy odwołać się do 2 technologii:

1. PEWNEJ, ale TRUDNEJ: Czyli stworzyć animację w technologii Flash, która będzie zawierała i video i przycisk do zamawiania/formularz.Takie rozwiązanie daje nam 100% pewność, że Klient nie zobaczy ceny za szybko, bo pokazanie się formularza jest na sztywno powiązane z video. Laik sobie z tym problemem nie poradzi.
2. DOBREJ, ale PROSTEJ: Drugie rozwiązanie polega na odkryciu formularza za pomocą skryptu JavaScript, który po założonym przez nas czasie pokaże formularz.Takie rozwiązanie zadziała dobrze, jeśli użytkownik nie będzie miał opóźnień w ładowaniu się video i jeśli nie będzie zatrzymywał video.

Teraz zaprezentuję Wam to drugie rozwiązanie. Poniższy przykład dotyczy kursu na Ekademia.pl, ale analogicznie można go zastosować na własnej stronie. Na Ekademia.pl oferta znajduje się w DIV "salesletter" a formularz w DIV "salesform". Musimy więc ukryć i pokazać wszystko, co znajduje się pomiędzy <div class="salesform"> a </div>. Aby to zrobić, należy przejść do Edycji oferty naszego kursu. Następnie należy włączyć edycję "Testowanie i Śledzenie"

Gdzie w sekcji "Javascript w sekcji HEAD oferty"

wkleimy następujący kod:

<style>
DIV.salesform {
visibility:hidden;
}
</style>
<script type="text/javascript">
function showIt() {
$("DIV.salesform").css("visibility","visible");
}
setTimeout("showIt()", 4*1000); // 1000 = 1 sec
</script> 

<style>
.salesletter {
 float: none;
 width: 710px;
 margin: 0 auto 0 auto;
}
*.salesletter {
 float: none;
 width: 710px;
 margin: 0 auto 0 auto;
}
.salesform {
 clear: both;
 float: none;
 width: 425px;
 margin: 0 auto 0 auto;
 visibility:hidden;
}
</style>
<script type="text/javascript">
function showIt() {
$("DIV.salesform").css("visibility","visible");
}
setTimeout("showIt()", 4*1000); // 1000 = 1 sec
</script> 

<div class="salesform">
KOD FORMULARZA
</div>