Kall en tilpasset widget fra HTML

Slik «kaller» du en tilpasset widget fra HTML

Tenk på tre lag. Tilkoblingsskriptet lastes inn GSpeech for hele nettstedet. Widgeten i Cloud Console er spillerdefinisjonen (tale, Chrome, selektorer, URL-regler). Monteringen i HTML-koden din er den tomme noden der den spilleren kan vises.

• 1. Tilkoblingsskript — én gang per nettsted (Integrasjoner → Html-nettsted), vanligvis før </body>.
• 2. Publisert widget — Full / Knapp / Sirkel du oppretter eller tilpasser i konsollen.
• 3. Monter i HTML — f.eks. <div class="my_listen_btn"></div>; Render-elementet må være .my_listen_btn.
• Innholdsvelger — CSS-mål for sidetekst som skal fortelles (eller la feltet stå tomt og bruk innholdstekst for frittstående lyd).

Tommelfingerregel: HTML «importerer» aldri en widget etter navn. Samsvarende Render Element + monteringsklasse is samtalen.

Hvordan skrive id, klasse og komma (ingen kodegrad nødvendig)

Innholdsvelger, gjengivelseselement og ekskluderingsliste bruker det samme enkle språket. Du trenger bare to prefikser – så kan du sette sammen muntlig innhold i biter og skjære ut søppel med Ekskluder.

• id → # — i HTML id="article" → inn GSpeech skrive #article (hash + den nøyaktige ID-en).
• klasse → . — i HTML class="post-content" → skrive .post-content (prikk + den eksakte klassen). Hvis elementet har flere klasser, er én matchende klasse nok.
• Bare tagg — bare tagnavn fungerer også: article, section, h1 (ikke # or .).
• Innholdsvelger + komma — samle innhold i deler i ett felt: #intro,.chapter-body,#summaryTreff leses i rekkefølge – perfekt når siden er delt på flere innpakningsark.
• Utelat liste + komma — fjern støy fra det valget med samme syntaks: #comments,.ads,.share-buttonsUnntak gjelder innenfor det Content Selector samlet inn.
• Hvordan finne verdier — på den aktive siden: høyreklikk på blokken → Inspiser. Se etter id="…" or class="…", og skriv dem deretter inn med # or . i konsollen. Gjennomgang av dyp ekskludering: Ekskluder liste og ingen tale.

Tre standardmonteringer kontra din egen tilpassede widget

Dokumenter viser ofte de tre praktiske monteringsklassene fordi de leveres klare med Cloud-standarder. En tilpasset widget er ikke et annet produkt – det er den samme Full / Knapp / Sirkel-typen med din Render-elementet (og vanligvis innholdsvelgeren din).

• Standard full — montere <div class="gsp_full_player"></div> → Gjengivelseselement .gsp_full_player.
• Standard knapp - .gsp_button_player montering + matchende render-element.
• Standardkrets - .gsp_circle_player montering + matchende render-element.
• Din tilpassede samtale — enhver klasse eller ID du eier (f.eks. #promo-listen or .footer_tts) → angi nøyaktig den velgeren som Render-element på widgeten du publiserte.

WordPress-shortcodes ([gspeech] / button / circle) er en annen plasseringssti for innlegg. På rå HTML er det ingen shortcode – bare paret mount + Render Element. Se standard kortkoder kun for WP.

Ende-til-ende: konfigurer og kall den tilpassede widgeten din

1. Opprett / åpne din nettsted i Cloud Console og bekreft globale standardinnstillinger i innstillinger (stemme, språk) — se Global vs. tilpasset.
2. Kopier HTML-nettsted tilkoblingsskript fra integrasjoner og lim det inn én gang i den delte malen før </body>Distribuer slik at hver side som trenger lyd laster skriptet.
3. Lag en Full / Knapp / Sirkel widget (eller åpne en eksisterende tilpasset). Gi den et tydelig navn slik at du kjenner den igjen senere.
4. I sidens HTML, legg til en tom montering hvor spilleren skal vises – velg en unik klasse du ikke vil bruke om igjen for urelatert brukergrensesnitt. Eksempel: <div class="my_custom_player"></div>.
5. På widgeten, angi Gjengi element til akkurat den velgeren: .my_custom_player (første prikk for en klasse; #id for en ID).
6. Sett Innholdsvelger til det besøkende skal høre. Én innpakning er grei (#main or .product-description). Eller sett sammen brikkene med komma: #intro,.body-copy,#summary. Bruk parent_class / self_class når monteringen sitter inne i den innholdsblokken.
7. Valgfritt: Ekskluder liste (også kommaseparert, samme # / . regler) for navigasjon / annonser / kommentarer — f.eks. #comments,.ads,.share-buttonsValgfritt: Tillatte/blokkerte nettadresser, slik at denne widgeten bare kjører der du vil.
8. Sett status til Publisert, Spar, last inn den aktive HTML-siden hardt på nytt, og bekreft at spilleren fyller monteringen din og leser riktig tekst.

Trenger lyd med Nei. tekst rundt siden (demo-/kioskstil)? La innholdsvelgeren stå tom og fyll den ut Innhold Tekst i stedet – fullstendig gjennomgang: Frittstående spiller med innholdstekst.

Minimal HTML-side som kaller widgeten din

Nedenfor er formen på en arbeidsside. Erstatt tilkoblingsskriptet med ditt fra Integrasjoner. Monteringsklassen må samsvare med Render Element på den publiserte widgeten; Innholdsvelgeren skal målrette #article i dette eksemplet.

• Monter i HTML - <div class="my_custom_player"></div> (tømme).
• Widget-gjengivelseselement - .my_custom_player.
• Innholdsvelger for widgeter - #article.
• Tilkoblingsskript — din énlinjede HTML-nettside legges inn før </body>.

Skjelett (kommentarer viser kartleggingen):

<!-- spoken content -->
<article id="article">…your text…</article>
<!-- player mount (Render Element = .my_custom_player) -->
<div class="my_custom_player"></div>
<!-- GSpeech connection script from Integrations -->

Du kan plassere monteringen over artikkelen, i en sidefelt eller i bunnteksten – Innholdsvelgeren peker fortsatt på #article, så layout-chrome blir ikke lest opp. Det layoutmønsteret er også dekket i Plasser en tilpasset widget.

Hvis den tilpassede widgeten ikke vises

1. Tilkoblingsskript lastet inn på den URL-en (Vis kilde / Nettverk).
2. Widget-statusen er Publisert (ikke utkast / deaktivert).
3. Monteringen finnes på siden, og stavemåten for klasse/ID samsvarer Gjengi element nøyaktig (inkludert den ledende . or #).
4. Innholdsvelger finner ekte tekst (eller Innholdstekst fylles ut for frittstående).
5. Tillatte/blokkerte nettadresser ekskluderer ikke denne banen.
6. Hard innlasting etter lagring – HTML/CDN-hurtigbufferen kan beholde et gammelt skall i en kort periode.

Fullstendig feilsøkingssti: Spilleren vises ikke.