Så bäddar du in dina evenemang på din webbplats

Det här får du

En levande lista över dina publicerade evenemang på din egen webbplats, i dina egna färger. Den uppdaterar sig själv — publicera ett evenemang på AllEvents så dyker det upp på din sajt, utan ett andra ställe att hålla i synk. När någon väljer ett evenemang öppnas det på AllEvents och köpet sker precis som vanligt, så dina biljetter, skanning, återbetalningar och utbetalningar fungerar oförändrat.

Det är en<script>-taggen. Den anpassar sin storlek efter dina evenemang, så det blir ingen rullningslist inuti och ingen höjd för dig att gissa.

Steg 1 — Öppna inbäddningsinställningarna

I din studio, gå tillGrafisk profil och välj fliken Bädda in på din webbplats.

Ställ in dina färger och din logotyp på Grafisk profil -fliken först om du inte redan gjort det. Inbäddningen använder samma grafiska profil som din utcheckning och dina biljettmejl, så allt du ställer in där syns även här.

Steg 2 — Skapa din inbäddningsnyckel

Tryck på Skapa inbäddningsnyckel. Två saker skapas:

• Din adress, byggd av ditt företagsnamn — så en arrangör som heter AllEvents får allevents. Den ändras aldrig, även om du senare byter namn på företaget, eftersom en ändring skulle bryta varje inbäddning som redan är live.
• Din inbäddningsnyckel, som är det som låter din webbplats hämta dina evenemang.

Nyckeln är inte ett lösenord. Den ligger i din webbplats HTML där vem som helst kan läsa den, och det är i sin ordning — allt den kan göra är att lista evenemang du redan publicerat offentligt. Den kan inte ändra något, se din försäljning eller nå något annat i ditt konto. Det den ger dig är kontroll: vill du någon gång att en kopia av din kodsnutt ska sluta fungera, återställ nyckeln.

Steg 3 — Välj hur det ser ut

Två layouter, båda de som AllEvents använder på sina egna sidor:

• Lineup — en kolumn som är lätt att skumma. Varje evenemang är en rad: liten bild till vänster, sedan titeln med plats, datum och pris. Bäst när du har många evenemang, eller lägger det i en smal kolumn eller sidopanel.
• Showcase — affischer i full bredd, med titeln över din bild. Bäst när bilden är det som säljer och du har få evenemang i gång samtidigt.

Sedan tre inställningar:

• Ordning — Händer snart (standard), Mest sålda först eller Nyligen tillagda.
• Per sida — 6, 12 eller 24. Allt utöver den sidan får en Nästa-länk.
• Visa slutsålda evenemang — av som standard. Slå på det om ett slutsålt evenemang bevisar din poäng snarare än slösar med utrymmet.

Ändringar sparas medan du gör dem, och förhandsvisningen nedan uppdateras direkt.

Steg 4 — Granska förhandsvisningen

Förhandsvisningen är ingen skiss. Det är den riktiga inbäddningen, som laddar dina riktiga evenemang via samma adress din webbplats kommer att använda — så det du ser där är det dina besökare får.

Steg 5 — Klistra in det på din webbplats

Kopiera kodsnutten. Den ser ut så här, med din egen adress och nyckel i:

<script src="https://allevents.com/embed.js"
        data-slug="allevents"
        data-key="your-embed-key"></script>

Klistra in den i din sidas HTML där du vill att listan ska visas. Evenemangen dyker upp på just den platsen — taggen ersätter sig själv med dem.

På WordPress, lägg till ett Custom HTML-block och klistra in. På Squarespace använder du ett Embed- eller Code-block; på Wix lägger du till Embed a Widget och väljer HTML-alternativet. Om din sidbyggare tar bort <script>-taggar ur vanligt sidinnehåll, leta efter blocket som heter ”custom code”, ”embed” eller ”HTML” — det är det som behåller dem.

Om din webbplats är byggd med React, Vue, Angular eller Svelte

Att klistra in kodsnutten direkt i en komponent fungerar inte. Alla de här ramverken bygger sidan med JavaScript, och en <script> -tagg skriven i en mall eller i JSX behandlas som inert markup — webbläsaren kör den aldrig. Det är en regel i ramverket, inte något särskilt för oss.

Det finns två vägar runt det. Välj den som passar din kodbas.

Alternativ A — lägg till skriptet själv, efter att komponenten monterats

Skapa taggen i kod och placera den i elementet där du vill ha evenemangen. Det behåller allt kodsnutten gör, inklusive den automatiska höjden.

React

import { useEffect, useRef } from "react";

export function AllEvents() {
  const box = useRef(null);

  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://allevents.com/embed.js";
    script.dataset.slug = "your-slug";
    script.dataset.key = "your-embed-key";
    box.current.appendChild(script);

    // Strict Mode runs effects twice in development, which would give you two
    // copies of the list. Clearing on cleanup keeps it to one.
    return () => { box.current.innerHTML = ""; };
  }, []);

  return <div ref={box} />;
}

Next.js

Samma komponent, med "use client" högst upp i filen. Det måste vara en klientkomponent: skriptet körs i webbläsaren, så det finns inget för servern att rendera. Använd inte next/script här — den placerar taggen åt dig, och evenemangen dyker upp där den bestämmer i stället för där du satte komponenten.

Vue

<script setup>
import { onMounted, ref } from "vue";

const box = ref(null);

onMounted(() => {
  const script = document.createElement("script");
  script.src = "https://allevents.com/embed.js";
  script.dataset.slug = "your-slug";
  script.dataset.key = "your-embed-key";
  box.value.appendChild(script);
});
</script>

<template><div ref="box"></div></template>

Angular

import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";

@Component({ selector: "all-events", template: "<div #box></div>" })
export class AllEventsComponent implements AfterViewInit {
  @ViewChild("box") box!: ElementRef<HTMLDivElement>;

  ngAfterViewInit() {
    const script = document.createElement("script");
    script.src = "https://allevents.com/embed.js";
    script.dataset["slug"] = "your-slug";
    script.dataset["key"] = "your-embed-key";
    this.box.nativeElement.appendChild(script);
  }
}

Svelte

<script>
  import { onMount } from "svelte";
  let box;

  onMount(() => {
    const script = document.createElement("script");
    script.src = "https://allevents.com/embed.js";
    script.dataset.slug = "your-slug";
    script.dataset.key = "your-embed-key";
    box.appendChild(script);
  });
</script>

<div bind:this={box}></div>

Alternativ B — skriv iframen själv

Vill du hellre slippa injicera ett skript, lägg in iframen i din egen markup. Adressen är:

https://allevents.com/e/your-slug/events?k=your-embed-key

Lägg till &style=showcaseför att åsidosätta layouten för just den placeringen utan att ändra din sparade inställning.

Du förlorar den automatiska storleksanpassningen, eftersom bara sidan inuti ramen vet hur stor den är. Den talar om det: den skickar ett meddelande till föräldrafönstret varje gång dess storlek ändras, och du kan lyssna efter det. I React:

const [size, setSize] = useState({ height: 600, maxWidth: "none" });

useEffect(() => {
  const onMessage = (event) => {
    if (event.origin !== "https://allevents.com") return;
    if (event.data?.type !== "allevents:embed:height") return;
    setSize({ height: event.data.height, maxWidth: event.data.width });
  };
  window.addEventListener("message", onMessage);
  return () => window.removeEventListener("message", onMessage);
}, []);

return (
  <iframe
    src="https://allevents.com/e/your-slug/events?k=your-embed-key"
    style={{ width: "100%", border: 0, ...size }}
    scrolling="no"
    title="Events"
  />
);

Kontrollera alltid avsändaren, som ovan. Vilken sida som helst kan skicka ett meddelande till vilket fönster som helst, så utan den kontrollen kan ett annat skript på din sida krympa ramen till ingenting. Meddelandet är alltid { type: "allevents:embed:height", height: <number>, width: <number> }. Bredden är hur mycket plats korten faktiskt använder, så ett ensamt evenemang hamnar inte i en sidbred tom ruta — behandla den som ett maxvärde, inte en fast bredd, annars slutar ramen vara responsiv.

Vad dina besökare ser

Dina evenemang, i dina färger, med en Köp biljetter -knapp på varje. Att klicka på den öppnar evenemanget på AllEvents i en ny flik, så ingen fastnar i en liten ruta på din sida och din egen webbplats ligger kvar bakom. Kassa, bekräftelse och biljettmejl är exakt desamma som för någon som hittade dig via AllEvents.

Slutsålda evenemang visar en Slutsåld-markering i stället för en köpknapp — du kan inte råka sälja en biljett som inte finns, vilken inställning du än valt.

Att hålla den uppdaterad

Det gör du inte. Publicera ett evenemang så dyker det upp; när ett evenemang är över faller det bort av sig själv. Listan visar bara publicerade evenemang som ännu inte ägt rum, så det finns inget att rensa och inget att komma ihåg.

Att återställa din nyckel

Återställ den om din kodsnutt hamnat någonstans du inte tänkt dig, eller om du hellre börjar om. Var medveten om vad det gör:varje kopia av din gamla kodsnutt slutar fungera omedelbart, inklusive den på din egen webbplats, tills du klistrar in den nya. Din adress ändras inte, så det är det enda du behöver uppdatera.

Om det inte dyker upp

• Inget visas alls.Din sidbyggare har med största sannolikhet tagit bort <script>-taggen. Använd dess egna inbäddnings- eller custom-HTML-block.
• Det står att listan inte är tillgänglig. Nyckeln i din kodsnutt är inte aktuell — oftast för att den återställdes efter att snutten klistrades in. Kopiera snutten igen.
• Den är tom. Du har inga publicerade evenemang kvar. Utkast, evenemang som väntar på granskning och avslutade evenemang räknas inte.
• Färgerna är fel. De kommer från fliken Grafisk profil. Ställ in dem där så följer inbäddningen efter.

Fast på något som inte tas upp här? Hör av dig och berätta adressen till sidan du bäddar in på — det räcker oftast för att vi ska se vad som händer.