Spring videre til hovedindholdet

[GC - AI Estimator] Opsætning af AI-Estimator selvbetjent tilbud (website + kunde-login)

R
Skrevet af Roman Aldunate

At tilføje AI-Estimator til jeres kundeoplevelse kan gøres på to måder: ved at indlejre et selvbetjeningsværktøj til tilbud direkte på jeres website, eller ved at invitere kunder til at logge ind og få personlige tilbud via GelatoConnect. Denne guide forklarer begge muligheder trin for trin.

Tilføj selvbetjenings-tilbudsfunktions til din hjemmeside

Du kan integrere AI-Estimator, så når brugere klikker på knappen “Get a Quote”, åbnes en indlejret iframe, der viser tilbudsværktøjet. En eksempelimplementering er tilgængelig som reference.

Implementeringstrin

  • Knapregistrering
    Tilføj klik-hændelseslyttere til din eksisterende “Få et tilbud”-knap. Disse bør forhindre standardnavigation og i stedet udløse iframe-tilstanden.

  • Udskiftning af indhold
    Når iframe’en åbnes, skal hovedsidens indhold og sidefoden skjules, mens overskriften forbliver synlig. Dette kan opnås med CSS-egenskaberne display eller visibility.

  • Iframe-integration
    Indsæt en iframe i fuld bredde, der indlæser det tilbuds-URL, som Gelato har angivet (https://printconnect.gelato.com/XX_XXX).

    • Brug height: calc(100vh - 80px) for at efterlade plads til headeren (justér 80px baseret på den faktiske headerhøjde).

    • Angiv width: 100% for at sikre, at iframen dækker hele sidens bredde.

  • Luk-knap
    Placer en flydende "Luk"-knap i øverste venstre hjørne af iframe-området.

     Close

    Konfigurer den til at skjule iframe’en, gendanne det oprindelige indhold og genaktivere rulning, når der klikkes.

  • Forhindring af scrolling
    Deaktiver scrolling med document.body.style.overflow = 'hidden', når iframe'en er aktiv. Nulstil den til auto, når den lukkes.

  • Tilstandsstyring
    Brug et boolesk flag til at spore, om iframe’en er åben eller lukket. Det gør det muligt at skifte mellem den indlejrede visning og dit websteds normale layout.

Vigtige CSS-stilarter

  • height: calc(100vh - [header-height]px) for korrekt iframe-størrelse

  • width: 100% for fuld bredde-layout

  • position: fixed for luk-knappen

  • overflow: hidden anvendt på body, når iframe er aktiv

  • Betinget skjulning og visning af hovedindholdet

Invitér kunder til at få personlige tilbud

Du kan også invitere kunder, så de får et login til selv at lave tilbud. Dette sikrer, at de får personlige priser i henhold til de prismodeller, du har sat op for dem. Det fjerner også behovet for, at de manuelt indtaster oplysninger som navn eller e‑mail, og adskiller forespørgsler fra verificerede kunder.

Se videogennemgang for instruktioner (24:28 – 29:28)

Sådan fungerer det

  • Kunder, der er logget ind, skal bruge siden direkte (ikke som et iframe), da det er nødvendigt for en sikker oplevelse.

  • De får det link via e-mail, når de bliver inviteret, og de kan også få adgang til det på https://printconnect.gelato.com/XX_XXX/login.

Relaterede artikler
Besvarede dette dit spørgsmål?