Hvordan legge til Vippsknappene i Kajabi?

Når du har lagt til et nytt produkt i Edpay, får du opp 2 ulike kodesnutter som representerer en "Vippsknapp". Det er én kodesnutt du kan bruke på landingssider og én for checkoutsider. Her er en fremgangsmåte for å legge til knappene på siden din.

Landingssider

Den øverste kodesnutten er den du skal bruke på landingssider. Marker teksten og kopier innholdet. 

Gå til landingssiden du vil legge til knppen på. Trykk på seksjonen på landingssiden, hvor du ønsker å legge til knappen. Gå til "source code" øverst til venstre i editoren:

Lim inn kodesnutten der du vil ha knappen. 

 Til slutt trykker du OK og Save, så ser du at knappen dukker opp på landingssiden din! 

Checkout

Checkoutsider er litt mer komplisert å sette opp første gangen. Det aller første du må gjøre er å gå til Settings -> Checkout settings og legge til følgende kodesnutter: 

Legg til denne kodesnutten under "Header Tracking Code": 

<style>
    .edpay-button, .vipps-knapp, .klarna-knapp {
        margin-bottom: -10px;
        display: block;
        padding-top: 15px;
        margin-top: 6px;
    }
</style>

Og denne koden under "Footer Tracking Code":

<script>
    $(document).ready(function (){
        var edpay_vipps= $(".vipps").html();
        $(".panel-heading").append(edpay_vipps);
        var edpay_klarna= $(".klarna").html();
        $(".panel-heading").append(edpay_klarna);
    });
</script>

Når du er ferdig skal det se sånn her ut:

Den gode nyheten er at du kun trenger å gjøre disse stegene første gangen. Neste gang du skal legge til en knapp på checkout, så kan du hoppe rett til stegene under. 

Nå kan du kopiere kodesnutten for checkout:

Gå til Offeret hvor du vil lime inn Vippsknappen, trykk på Offer Description og åpne "source code".

Lim inn kodesnutten fra Edpay. 

Trykk Ok og Save, så ser du at Vippsknappen dukker opp under prisen: 

NB: Husk at du også må bruke "Offer is granted" på Automations: https://www.edpay.no/blog/offer-is-granted