faviconKehittäjille    Rajapinnat    Upotukset

English

Kyselyn upottaminen

Upota Zeffi-kyselyt verkkosivujesi osaksi käyttäen iframe-upotusta, tai leijuvaa upotusta (pop up -kyselyä) . Kommunikoi kyselyiden kanssa helppokäyttöisen rajapinnan avulla.

 

Varmista, että olet julkaissut kyselyn. Upotuksia ei voi tehdä, jos kyselyä ei ole julkaistu tai se on offline-tilassa. 

Upotus iframella

Voit upottaa kyselyn iframea hyödyntäen käyttämällä oheista esimerkkikoodia.

<iframe src="https://survey.zef.fi/KEY/" width="100%" height="640px" hspace="0" vspace="0" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="min-width: 320px; max-width: 960px" onmousewheel=""></iframe>
Muista korvata "KEY" oman kyselysi upotuskoodilla, kun luot upotusta verkkosivullesi.
art-embed

Leijuva upotus (pop up -kysely) javascriptillä

Luodaksesi leijuvan upotuksen liitä oheinen koodi sivustosi header-osaan.

<script src="https://zef.fi/s/zeffi.js?key=KEY1,KEY2,KEY3" async defer></script>
Muista korvata "KEY" oman kyselysi upotuskoodilla, jonka saat luotuasi uuden Leijuvan upotuksen. Tarvitsen vain sen määrän upotuskoodeja, kuin sinulla on sivustolle upotettavia kyselyjä, loput "KEY" -koodit voi jättää pois.
Leijuvan upotuksen toiminnot
zeffi.openPopup()

Avaa leijuvan upotuksen. Jos olet tehnyt useita leijuvia upotuksia, ne avataan upotuskoodeille antamassasi järjestyksessä.

zeffi.openPopup(key?: string, startConfig?: SurveyStartConfig)

Avaa tietyn leijuvan upotuksen, jonka upotuskoodin ("KEY") annat. Vain yksi kysely voi olla kerrallaan auki ja tämä toiminto sulkee mahdollisesti auki olevat muut kyselyt.

zeffi.closePopup()

Sulkee kaikki avoinna olevat leijuvat upotukset.

zeffi.togglePopup()

Vaihtaa kyselyn tilaa (avoinna tai kiinni). Jos upotettuna on useita kyselyjä, ensimmäinen kysely avataan.

zeffi.togglePopup(key?: string, startConfig?: SurveyStartConfig)

Vaihtaa kyselyn tilaa (avoinna tai kiinni). Jos upotettuna on useita kyselyjä, tietyllä upotuskoodilla ("KEY") nimetty kysely avataan.

zeffi.showBubble()

Näyttää leijuvan upotuksen avauspainikkeen. Jos kyselyjä on upotettu useita, ensimmäisen leijuvan upotuksen avauspainike näytetään.

zeffi.showBubble(KEY)

Näyttää leijuvan upotuksen avauspainikkeen. Jos kyselyjä on upotettu useita, tietyllä upotuskoodilla ("KEY") yksilöidyn leijuvan upotuksen avauspainike näytetään.

zeffi.hideBubble()

Piilottaa leijuvan upotuksen avauspainikkeen.

Huom! Ilman avauspainiketta käyttäjä ei voi avata leijuvaa upotusta, vaan avaaminen on koodattava.

 

Abstraktit mallit
interface SurveyStartConfig {
  // uudelleenkäynnistää kyselyn uudelle vastaajalle
  restart?: boolean;
  // kielen koodi, jolla kysely käynnistetään
  language?: string;
  // käynnistä kysely saavutettavuustilassa
  accessibilityMode?: boolean;
  // zeffi vastaajan tunniste
  zefId?: string
  // vastaajaan liitettävät taustatiedot
  respondentFields?: Record<string, string>;
}
art-popup

Kyselyn kommunikaatio

Saat upotetun kyselyn tai leijuvan upotuksen keskustelemaan sivustosi kanssa ja seuraamaan tapahtumia.

Huom! Varmista, että määrittelet "origin" -arvon Zeffiin, muuten tapahtumatietoja ei lähetetä. Löydät tämän upotettavan kyselyn tai leijuvan upotuksen edistyneistä asetuksista.

Wildcardien (*) käyttö on mahdollista, mutta emme missään nimessä suosittele sitä.

Lue lisää täältä asianmukaisesta käytöstä.


window.addEventListener('message', onMessageReceived);

function onMessageReceived(message) {
  if (message.origin === 'https://survey.zef.fi') {
    // you have received a message from the survey
    // use message.data.type to get the message type
    // use message.data.data to get the message payload
  }
}


Esimerkkikoodi tapahtumien kuuntelusta.

Abstraktit mallit
interface SurveyEvent { type: SurveyEventType, data: SurveyEventData }

Kaikki tapahtumat, joita upotetusta kyselystä lähetetään saavat SurveyEvent -rakenteen.

interface SurveyEventData {
  survey: string;
  linkKey: string;
  answererId: string;
  timestamp: number;
}

Perustiedot lähetetään kaikista tapahtumista.

enum SurveyEventType {
  Start = 'start',
  Answer = 'answer',
  Complete = 'complete',
  Restart = 'restart',
  Outcome = 'outcome'
}

Tapahtumatyyppien määrittely SurveyEvent:ille.

Mahdolliset tapahtumatyypit
start
interface SurveyStartEventData extends SurveyEventData {}

Lähetetään kun kysely aloitetaan.

answer
interface SurveyAnswerEventData extends SurveyEventData {
  question: QuestionData;
  answer: string;
  progress: number;
  answerType: string;
}

Lähetetään, kun vastaus annetaan.

complete
interface SurveyCompleteEventData extends SurveyEventData {
  progress: number;
}

Lähetetään, kun kysely on valmis.

outcome
interface SurveyOutcomeData {
  score: number;
  outcome: OutcomeData;
}

interface SurveyOutcomeEventData extends SurveyEventData {
  outcomes: SurveyOutcomeData[];
}

Lähetetään, kun kyselyn lopputulos muuttuu. Tämä arvo muuttuu koko kyselyyn vastaamisen ajan.

restart
PlayerRestartEventData extends SurveyEventData {}

Tämä arvo lähetetään, kun kysely aloitetaan alusta.