Vain webinaarissa livenä oleville

Kaksi asiaa jotka
säästävät sinulta tunteja.

Tässä ne käytännön asiat joihin moni törmää kun alkaa tehdä sivuja tekoälyn avulla Systemeen — ja miten ne ratkaistaan.

Bonus 1

Prompti jolla Claude tekee Systemeen sopivaa koodia — heti oikein.

Kun pyydät Claudelta koodia normaalisti, se tekee koodia väärässä muodossa — eikä se toimi Systemessä. Tämä on normaalia ja tapahtuu kaikille. Claude ei tiedä oletuksena miten Systeme toimii.

Alla oleva lyhyt ohje — eli prompti — kertoo Claudelle tarkalleen millaista koodia Systeme tarvitsee. Kun lisäät sen Claudeen ennen pyyntöäsi, Claude tekee koodin suoraan oikeaan muotoon. Sinun ei tarvitse ymmärtää koodista mitään — riittää että kopioit ja käytät.

Tunnistautuva virhe

Näetkö tämän viestin Systemessä?

Systeme — This code is not valid -virhe

"This code is not valid" tarkoittaa yksinkertaisesti että Claude teki koodin väärässä muodossa. Systeme ei hyväksy sitä sellaisenaan.

Ratkaisu on yksinkertainen: anna Claudelle alla oleva prompti — ja pyydä se tekemään koodi uudelleen. Se toimii heti.

Kopioi tämä — liitä Claudeen

Kopioi prompti alla olevasta napista

Liitä se Claudeen ennen kun kerrot mitä sivua haluat. Claude muistaa ohjeen koko keskustelun ajan — ei tarvitse toistaa.

Please write this as Systeme.io-compatible HTML. That means: no <!DOCTYPE>, <html>, <head>, or <body> tags. Start with a <link> tag for any Google Fonts, followed by a <style> block, then all content inside a single wrapper <div>. Prefix all CSS class names with a short unique namespace (e.g. the initials of the brand or page) so they don't conflict with Systeme's styles. Wrap all JavaScript in a self-executing function (function() { ... })();. The output should be paste-ready into a Systeme.io custom HTML block with no modifications needed.
💡

Prompti on englanniksi — se on tarkoituksellista. Claude toimii paremmin englanninkielisillä teknisillä ohjeilla. Voit silti kirjoittaa Claudelle suomeksi kaiken muun.

Bonus 2

Valmis elementti Systemeen — koodi menee oikein ilman kehyksiä.

Kun liität Clauden tekemän koodin Systemeen, se pitää liittää oikeaan paikkaan. Jos liität sen tavalliseen HTML-kenttään, sivun reunoille ilmestyy ylimääräiset kehykset jotka näyttävät rikkinäiseltä.

Olen valmistellut sinulle valmiin elementin jossa kaikki asetukset on jo kunnossa. Sinun tarvitsee ladata se kerran tilillesi — sen jälkeen käytät sitä aina kun liität Clauden koodia Systemeen.

Mistä kehykset tulevat? Systemen tavallinen HTML-kenttä lisää automaattisesti tilaa ympärille. Tämä valmis elementti on säädetty niin että tuo ylimääräinen tila on poistettu. Lopputulos näyttää siistiltä — ei kehyksiä.

1

Kirjaudu Systemeen ja lataa valmis elementti tilillesi — tee tämä ensin

Kopioi alla oleva linkki ja liitä se nettiselaimen uudelle välilehdelle.

Tämä tehdään vain kerran. Sen jälkeen elementti on aina valmiina Systemessäsi.

systeme.io/dashboard/share?hash=229846293e…

Kopioi linkki → liitä selaimen osoitepalkkiin.

2

Mene muokkaamaan verkkokurssin myyntisivua tai muuta sivua johon haluat lisätä koodin

Avaa se sivu johon olet tekemässä uutta visuaalista ilmettä. Klikkaa sivun muokkauspainiketta — pääset sivueditoriin.

3

Sivueditorissa: vasemmalta Blocks → My Blocks

Sivueditorin vasemmalla reunalla on palkki. Etsi sieltä kohta Blocks ja sen alta My Blocks. Siellä näkyy nyt juuri lataamasi elementti.

⚠️

Jos elementtiä ei näy My Blocks -osiossa, varmista että teit vaiheen 1 — eli latasit sen linkistä. Ilman sitä My Blocks on tyhjä.

4

Lisää elementti sivulle

My Blocks -osiossa näet elementin nimeltä:

Block AI sivuja varten (JAETTU WEBISSA)

Vedä se sivullesi tai klikkaa sitä — se ilmestyy sivulle. Siirrä se haluamaasi kohtaan.

5

Klikkaa elementtiä ja liitä Clauden koodi siihen

Klikkaa sivulle lisäämääsi elementtiä. Avautuu koodieditori. Poista sieltä mahdollinen valmis teksti kokonaan.

Liitä Clauden tekemä koodi siihen tilalle. Tallenna. Siinä kaikki.

6

Tarkista — reunoilla ei pitäisi näkyä kehyksiä

Katso esikatselu. Jos sivun reunoilla ei ole ylimääräisiä kehyksiä — kaikki on oikein ja sivu on valmis julkaistavaksi.

Jos kehyksiä vielä näkyy, tarkista että käytit tätä elementtiä — et Systemen tavallista HTML-kenttää.

Muista jatkossa: Aina kun lisäät Clauden koodia Systemeen, käytä aina tätä samaa elementtiä. Ei koskaan tavallista HTML-kenttää.