Display-appen

Display-appen är en app du kan använda på alla moderna enheter med touch-skärm. Genom display-appen kan du samla in registreringar till din verksamhet, endast fantasin sätter gränser på var och hur du vill använda den! Vill du att gäster ska scanna en QR-kod på din väggmonterade TV för att registrera sig? Skriva in sina telefonnummer på din mobil då du går ut till dem? Eller kanske registrera sig på din tablett som står vid kassan? Allt är möjligt!

Vi tillhandahåller även möjligheten att lägga till bilder, informativ text, videos, personaliserade QR-koder, ändra färger, textstorlekar, typsnitt, och mycket mer. Du kan anpassa varje vy som kunder ser för att få det så snyggt och stilrent som möjligt.

Du kan fortsätta använda den L-formade displayen med vår gamla app. Vi kommer dock att sluta uppdatera den gamla appen, och eventuellt sluta stödja den helt. Detta kommer kommuniceras i god tid.

Vi hjälper dig gärna att byta till det nya systemet! På det nya systemet kan du potentiellt köra en identisk kopia av din nuvarande setup, eller fräscha upp den med någon av våra efterlängtade funktioner. Till exempel, lägg till din egna logga, visa bilder eller video, ändra textinnehåll, färg, storlek, typsnitt och mycket mer.

Dessutom är du inte längre bunden till att använda vår L-formade display. Du kan även köra den nya appen på andra enheter, så som din mobil, padda, dator eller TV!

Tveka inte att kontakta oss genom formuläret i vår online portal, inga frågor är dumma och vi hjälper dig mer än gärna att komma igång 🙂

Kort svar:
Ja! Absolut! Kontakta oss genom portalen och säg att du vill ha ytterliggare en enhet, så lägger vi till en ny display i din portal.

Förklaring:
Varje enhet med en display-app måste kopplas till en display i din portal, du kan endast koppla en fysisk enhet till varje listad display i portalen. Ifall du vill registrera kunder med flera olika enheter, (t.ex. telefon och tablett).

En vy-samling är en samling av alla vyer som display-appen kan visa mot en kund. En vy-samling består av 7 olika vyer. Den första vyn, standbyläget, är endast relevant om PayAtt är integrerat med ditt kassasystem. Denna vy syns längst till vänster i bilden nedan.

Vissa vyer är endast relevanta i vissa situationer, dessa behöver inte nödvändigtvis skapas. Dessa vyer är markerade med en gul cirkel i listan. Vyer som inte nödvändigtvis behövs skapas är standbyläget och stämpelkortsvyerna (endast relevanta om du använder stämpelkort).

En vy representerar ett tillstånd i registreringsprocessen. Varje vy har en layout som automatiskt visas på din display-app i olika lägen.

Exempel på vyer: Registreringsvyn visas när en gäst ska registrera sitt telefonnummer och de olika stämpelkortsvyerna visas efter en registrering, specifik vy beror på om gästen är ny, återkommande eller fått en stämpelkortsbelöning.

1. Standbyläget – Endast för kunder som integrerat med ett kassasystem. Denna vy visas tills ett köp genomförts. Ett perfekt ställe att visa information, t.ex. instruktioner om hur man registrerar sig, marknadsföringsvideo, reklam, öppettider, meny, mm.
2. Registreringsvyn – Denna vy presenterar allt som kunden behöver för att registrera sitt telefonnummer. Denna vy måste innehålla en number pad komponent, samt PayAtt disclaimer text.
   
   Vyn kan även innehålla en QR kod som tillåter kunder att registrera sig med hjälp av deras egen enhet. Detta är endast tillgängligt för kunder med en kassasystems-integrering. 
   
   
3. Vy för ny kund – Visas för nya kunder som aldrig registrerats sig förut, efter att de registrerat sitt telefonnummer.
   
   
4. Vy för återkommande kund – Visas för återkommande kunder, efter de registrat sitt telefonnummer.
   
   
5. Stämpelkortsvy för ny kund – Visas för kunder som får ett nytt stämpelkort.
   
   
6. Stämpelkortsvy för återkommande kund – Visas för kunder som får en stämpel på deras stämpelkort.
   
   
7. Stämpelkortsvy när belöning uppnåtts – Visas för kunder som uppnått en belöning tack vare denna registrering.

Det finns otroligt många olika enheter på marknaden, många som använder olika upplösningar. Vi vill att du ska kunna skapa vyer som passar din enhet perfekt, vilket är varför vi låter dig välja upplösningen själv. 

Efter att du valt den upplösning du har på enheten du vill använda kommer vyerna passa perfekt.

OBS! Vi räknar med att du alltid kör appen i helskärmsläge. För andra lösningar måste du själv räkna ut upplösningen manuellt.

Vi tillhandahåller en lista med de vanligaste enheterna. Om din enhet inte finns med i listan kan du söka på följande hemsida för att hitta de exakta värdena

Du måste orientera din enhet i det läge som du planerar att använda den, innan du besöker hemsidan.

https://whatismyresolution.com/

När du i vy-skaparen lägger till eller uppdaterar komponenter, kan du välja % symbolen för att ställa in en storlek till att vara en procentuell andel av dess förälder. Om du t.ex. har en container med bredden 500, och sedan lägger till en image med bredden 60% inuti containern, kommer bilden att ha bredden 500 * 0.6 = 300. Samma princip appliceras på en enhets dimensioner, tänk att bredden på enheten är containern i exemplet ovan.

Det kan vara svårt att designa en samling för två enheter med väldigt olika upplösning, vi rekommenderar att du istället bygger två olika samlingar och anpassar dem till vardera enhet.

Varje rad representerar en vy-samling.

Kontakta oss så hjälper vi dig att få tillbaka vy-samlingen.

När du skapar en ny samling så kan du välja mellan att skapa en från scratch eller att använda en mall. Vi rekommenderar att du följer dessa steg:

1. Skapa en ny samling och välj en mall som passar din enhets upplösning (eller är så nära som möjligt)
2. Ändra samlingens upplösning för att matcha din enhet.
3. Verifiera alla vyer genom att klicka på dem och inspektera dem i skaparen. Anpassa vyerna så att de ser så bra ut som möjligt. Ändringar är framförallt estetiska, mallarna innehåller all nödvändig funktionalitet!

Du kan ändra upplösning (dimensioner) på din samling genom att klicka på inställningar, sedan ändra upplösning.

Kom ihåg att kontrollera alla vyer i vy-skaparen efter att du ändrat upplösningen. Komponenter med en fixerad storlek kan komma att se väldigt annorlunda ut på en annan skärmupplösning.

Ja, i inställningarna på vy-samlingen kan du ändra bakgrundsbild eller bakgrundsfärg på alla olika vyer samtidigt.

Obs! Detta sätter bakgrunden på det yttersta elementet (body container). Detta kan vara mer eller mindre synligt på olika vyer, beroende på hur du strukturerat dina komponenter. Om du använt komponenten container och satt dess bredd/höjd till 100%, kommer ändringen inte att synas, då din egna container bakgrund fyller upp hela skärmen.

Hur många du vill, det finns ingen begränsning 🎉

Vy-skaparen består av:

• Huvudfönstret (preview/main window)
• komponentmeny (components menu)
• Översta menyraden (top bar)
• Inställningspanel (settings panel)

Huvudfönstret är där du ser en representation av hur vyn kommer se ut på din enhet. Fönstret är dimensionerat för att precis representera din valda skärmupplösning.

Komponentmenyn är på vänstra sidan av skärmen och öppnas genom att klicka på de tre raderna längst upp till vänster. Du kan välja en komponent i menyn och dra den till huvudfönstret med musen. Därefter kan du anpassa och modifiera komponenten i inställningspanelen.

I den översta menyraden kan du från vänster till höger:

1. Öppna komponentmenyn
2. Ångra och göra om senaste ändringar
3. See vilken skärm du jobbar på samt zoom (upplösningen anpassad till din nuvarande skärm)
4. Spara och stäng vy-skaparen

Om du klickar på en komponent kommer du att se dess inställningar på höger sida, detta är inställningspanelen. Här kan du ändra komponentens storlek, bakgrundsfärg, justera underliggande element, och mycket mer.

1. Allmänna komponenter.
2. Specifika komponenter, endast synliga i vy-skaparen när relevanta vyer byggs. T.ex. stämpelkorts-komponenter, eller number pad komponenten.
3. Integrerade komponenter, endast synlig om du är integrerade med ett kassasystem. T.ex. automatisk genererande av en QR kod för att låta gäster registrera sig på deras egen enhet.

De allmänna komponenterna är:

• Container: Default, 1×2, 1×3, 2×1, 3×1, 2×2, Custom 1, och Custom 2.
• Text: H1, H2, H3, H4, och body
• Numpad: Default, White, Black
• Image Carousel
• Image
• Customer QR Code
• YouTube video
• PayAtt disclaimer

De specifika komponenterna är:

• Stämpelkorts-komponenter: “New join card”, “Progress card”, och “Reward card”. Endast tillgängliga i de 3 sista vyerna, relaterade till stämpelkorts-information.
• Dynamiskt genererade text till stämpelkortsbelöningar: Del av “stämpelkorts-komponenter”, men kan även användas separat. Texten i denna komponent genereras automatiskt, beroende på stämpelkorts-kampanj och belöning.
• Dynamiskt genererade text till insamling av stämplar: Del av “stämpelkorts-komponenter”, men kan även användas separat. Texten i denna komponent genereras automatiskt, beroende på stämpelkorts-kampanj.

Det finns endast 1 integrerad komponent:

• QR Code: Endast tillgänglig om du har integrerad med ditt kassasystem. Välj vart på skärmen en dynamisk QR Kod skapas efter en kunds har genomfört ett köp, kunden kan då registrera sig på sin egen enhet.

Stämpelkorts-komponenterna är en sammanställning av flera underliggande komponenter (container, text och dynamisk text), som vi tillhandahåller så att du snabbt och enkelt kan designa din vy. 

De dynamiskt text fälten lägger till en text som varierar beroende på vilken stämpelkorts-komponent du använder. Du kan även själv lägga till dessa fält från komponentmenyn.

Stämpelkorts-komponenterna är:

• New Join: Bör användas i vyn för kunder som registrerar sig för första gången. Två dynamiska texter visas, nästa belöning, samt hur många stämplar som är kvar. Båda är hämtad från stämpelkortet.
• Progress: Bör användas i vyn för återkommande kunder som intjänat en stämpel. Två dynamiska texter visas, nästa belöning, samt hur många stämplar som är kvar. Båda är hämtad från stämpelkortet.
• Reward: Bör användas i vyn för kunder som får en belöning. En dynamisk text visas med beskrivningen på den intjänade belöningen.

Här väljer du vilken typ av enhet du har, tablet, mobil eller dator. Beroende på vilken du väljer, kommer komponenterna anpassas för den sortens enhet.

T.ex., Numpad-komponenten, för att mata in ett telefonnummer, kommer vara betydligt större om du väljer dator gentemot telefon.

Att placera object och sprida ut dem över skärmen på det sätt som du vill ha dem, är möjligen det svåraste att förstå konceptuellt i vy-skaparen. (Det fungerar på precis samma sätt som CSS flexbox, för er med bakgrund av webbprogrammering).

Först måste vi förstå att alla element som visas på skärmen har en parent-child relation, eller med andra ord, är uppbyggda som ett träd. Varje element kan ha 0 – X antal barn, vilka i sin tur kan ha ytterligare 0 – X antal barn. X kan vara oändligt stort. Inte alla komponenter kan ha bar, t.ex., Numpad komponenten kan inte ha några underliggande element.

Här är ett exempel på ett strukturerat träd och hur det skulle kunna se ut i vår vy-skapare:

Vi kan fördela alla barn till en förälder antingen horisontellt eller vertikalt, genom att ändra inställningen alignment settings på föräldern.

1. Direction specificerar om barnen ska fördelas horisontellt eller vertikalt.
2. Alignment specificerar vart på axeln dom ska ligga.
3. Justify content specificerar hur dom ska fördelas över axeln.

Notera i bilden där vi skapat vyn att endast den yttre containern body har direction = row (barnen är fördelade horisontellt), alla andra container har direction = column (fördela vertikalt). Genom att sätta värde på justify content till space-evenly, kan vi fördela texterna jämnt över dess förälder.

Nej. Vi planerar att översätta vy-skaparen i framtiden, tills dess hjälper vi dig mer än gärna att komma igång.

Nej. Vi jobbar på att tillåta dig ladda upp valfritt typsnitt i framtiden.

Komponenten stödjer inte tomma rader, du måste istället lägga till 2 text komponenter och justera avstånd med hjälp av inställningarna, framförallt margin, padding, storlek samt alignment (fördelning i Container-komponenten).

Det är inte självklart vad svaret på denna fråga är, i och med att det finns många sätt att skapa en “rand” längst kanterna av vyn. Vi misstänker dock att du menar padding värdet på body containern. Body containern har per default 5px padding.

För att ta bort denna padding, måste du klicka på body containern, alternativt, återupprepat klicka Go to parent tills body containern är selekterad, sedan välja Padding och sätta värdet på 0.

Använd den enhet som du vill installera appen på och öppna din webbläsare.

• iOS-enheter (iPhone, iPad, etc.) måste använda Safari
• Android-enheter (Samsung, Xiaomi, OnePlus, Google Pixel, Huawei, etc.) måste använda Chrome

Gå till följande länk och klicka på “installera” i fönstret som dyker upp, detta kommer skapa en genväg till applikationen i app format:

https://display.payatt.club 

Obs! Ifall du inte ser ett fönster med texten “installera” (eller liknande), så kan du öppna inställnings-menyn och leta efter alternativen Installera app, Lägg till på hemmskärm, eller liknande. Om din webbläsare är på engelska, kommer alternativen vara Install app, Save to home screen, eller något i den linjen.

Appen fungerar även i webbläsaren, men det kommer inte att ge dig den bästa användarupplevelsen. Framförallt eftersom det blir svårt att öppna appen i helskärm, upplösningen du byggt vyerna för räknar med helskärms-läge.

För att kunna välja en vy-samling i display-appen måste alla vyer i vy-samlingen vara godkända. Du ser enkelt i portalen om en vy är nekad, den kommer att ha en röd rand och ett felmeddelande.

Vissa vyer är endast relevanta i vissa fall, och behöver därför inte nödvändigtvis vara skapade. Dessa vyer är standby-läge (om du är integrerad med ett kassasystem) samt stämpelkortsvyerna (endast relevant om du har aktiva stämpelkort).

Nej, du ska bara behöva logga in en gång. Appen sparar dina inställningar och loggar automatiskt in dig varje gång du öppnar appen på nytt.

Det finns några undantag, då du kommer behöva logga in på nytt. Dessa är:

• Om du ominstallerar appen
• Om du raderar all data associerad med appen (cache minne)
• Andra situationer då datan går förlorad

Om du får denna varning, så betyder det att vi har uppdaterat display-appen och du måste ladda om appen för att se till att den använder den senaste versionen.

Du kan i vissa fall behöva starta om (ladda om) appen 1-5 gånger för att hämta hem den senaste versionen. Varningsboxen kommer automatiskt att försvinna då vi ser att du är på senaste versionen.

Efter att du loggats in, så måste du välja vilken display du vill koppla enheten till:

1. Välj verksamhet (endast synlig om du har flera verksamheter): Välj den verksamhet som du vill koppla enheten till
2. Välj fysisk display: Välj vilken display från portalen som du vill koppla enheten till. Varje display kan enbart vara kopplad till 1 fysisk enhet. Om alla dina displayer redan är i bruk, så måste du kontakta PayAtt så att vi kan skapa ytterligare en åt dig.
3. Välj vy-samling: Välj vilken vy-samling du vill använda på denna enhet.

Genom att klicka 5 gånger i det övre vänstra hörnet, öppnar du display-app inställningarna. I dessa inställningar kan du ändra:

• Språk (appliceras endast på hanterings-ställen, så som inställningar, inte på vyerna du byggt).
• Visningstid på vyer som visas efter en registrering. T.ex., hur länge du vill visa vyn för en ny kund, efter registrering.
• Förhandsgranska alla vyer. Välj en av vyerna genom att klicka på en av siffrorna mellan 1-6. För detaljerad information, se FAQ frågan hur förhandsgranskar jag de olika vyerna på min enhet?

Det första du behöver göra är att öppna inställnings-menyn genom att klicka 5 gånger i det övre vänstra hörnet. Här kan du välja vilken vy du vill förhandsgranska genom att klicka på en av siffrorna 1-6 (7 om du är integrerad med ett kassasystem).

Varje nummer representerar en specifik vy, dom är i samma ordning som vyerna visas i portalen.

Efter att ha klickat på ett nummer, kommer du hamna i förhandsvisnings-läge, tillsammans med en +-symbol. +-symbolen indikerar att du är i förhandsvisnings-läge och genom att klicka på den, öppnar du inställningsmenyn igen.

För att lämna förhandsvisnings-läget, kan du antingen klicka på plus symbolen (+), eller 5 gånger uppe i vänstra hörnet, för att öppna menyn, därefter måste du stänga menyn genom att klicka på X i högra hörnet.

Förhandsvisnings-läget avslutas automatiskt efter 30 sekunder av inaktivitet.

Kontakta PayAtt för att acceptera utländska telefonnummer i din klubb.