Soittopyyntö-widget

Esikatselu

Kokeile painiketta — tämä on täsmälleen sama widget kuin upotuksessa.

<!-- 1) Lataa skripti kerran (esim. ennen </body>) -->
<script src="https://painikkeet.isojoo.app/widget/isojoo-callback.js" defer></script>

<!-- 2a) Soittopyyntö-painike (valmis tyyli) -->
<span data-isojoo-callback></span>

<!-- 2b) Tarjouspyyntö-painike (valmis tyyli) -->
<span data-isojoo-callback data-type="quote"></span>

<!-- 2c) Oma painike / linkki — tyylitä täysin vapaasti omalla CSS:llä.
     Widget avaa modaalin, mutta ei renderöi omaa painiketta. -->
<button data-isojoo-callback-trigger data-type="quote" class="oma-cta">
  Pyydä tarjous
</button>

<!-- Vaihtoehtoisesti voit asettaa oletuspalvelun ja oman tekstin: -->
<span data-isojoo-callback data-service="Kotisiivous" data-label="Pyydä soittoa siivouksesta"></span>
<a href="#" data-isojoo-callback-trigger data-type="quote" data-service="Kotisiivous">Tarjous siivouksesta</a>

• • Skripti ladataan vain kerran. Painikkeita voi olla useita per sivu.
• • data-service valitsee palvelun valmiiksi (esim. palvelukohtaiset alasivut).
• • data-label vaihtaa painikkeen tekstin.
• • data-isojoo-callback-trigger antaa käyttää sivuston omaa painiketta / linkkiä — widget vain liittää klikkauksen ja avaa lomakkeen. Tyylittele elementti vapaasti omalla CSS:llä.
• • Modaalin tyylit eristetty Shadow DOM:lla — ei sotke sivuston omia tyylejä.

Painike lähettää onnistuneen lähetyksen jälkeen isojoo:submitted -tapahtuman (sekä eriytetyt isojoo:callback-submitted / isojoo:quote-submitted) ja työntää saman tapahtuman GTM:n dataLayeriin. Lisää alla oleva koodi kerran sivustolle ja vaihda omat tunnuksesi paikalle — konversiot kirjautuvat automaattisesti.

<!-- Konversioseuranta isojoo-painikkeille -->
<!-- Lisää tämä KERRAN sivustolle (esim. ennen </body>), painike-skriptin jälkeen. -->
<!-- Korvaa GA_MEASUREMENT_ID ja AW-CONVERSION_ID/CONVERSION_LABEL omillasi. -->
<script>
  window.addEventListener('isojoo:submitted', function (e) {
    var d = (e && e.detail) || {};
    // d.requestType = 'callback' | 'quote'
    // d.service, d.contactType, d.postalCode, d.apartmentSize

    // Google Analytics 4 (gtag.js)
    if (typeof gtag === 'function') {
      gtag('event', 'generate_lead', {
        event_category: 'isojoo_widget',
        event_label: d.requestType,
        service: d.service,
        send_to: 'GA_MEASUREMENT_ID'
      });
    }

    // Meta Pixel
    if (typeof fbq === 'function') {
      fbq('track', 'Lead', { content_name: d.service, content_category: d.requestType });
    }

    // Google Ads -konversio
    if (typeof gtag === 'function') {
      gtag('event', 'conversion', {
        send_to: 'AW-CONVERSION_ID/CONVERSION_LABEL'
      });
    }
  });
</script>

• • Google Analytics 4 — korvaa GA_MEASUREMENT_ID omalla mittaustunnuksellasi (G-XXXXXXX).
• • Meta Pixel — toimii suoraan jos fbq on alustettu sivulla.
• • Google Ads — korvaa AW-CONVERSION_ID/CONVERSION_LABEL omalla konversiotunnuksellasi.
• • Google Tag Manager — luo Custom Event -trigger tapahtumalle isojoo:callback-submitted tai isojoo:quote-submitted.

Sähköposti-ilmoitukset

Jokaisesta soittopyynnöstä lähtee ilmoitus osoitteeseen palvelu@isojoo.fi. Pyynnöt tallennetaan myös tietokantaan varmuuskopioksi.