Wie bettet man das Buchungs-Widget in eine reaktionsfähige Website ein?

Wenn Sie eine ansprechend gestaltete Website haben, die für ein optimales Anzeigeerlebnis auf einer Vielzahl von Geräten erstellt wurde, dann ist es möglich, den Phorest Online-Buchungs-IFrame einzubetten, so dass auch dieser sich selbst in der Größe anpasst, um eine einfache Navigation und das Lesen auf Geräten jeder Größe zu ermöglichen.

Um eingebettete Inhalte reaktionsfähig zu machen, müssen Sie einen enthaltenden Wrapper um den Iframe hinzufügen. Ihr Markup würde wie folgt aussehen:

Hinweis: Sie müssen die Subdomäne in der folgenden HTML-Codierung auf Ihre Subdomäne aktualisieren. Sie können finden Sie Ihre Subdomain am Ende Ihres Online-Buchungs-Direktlinks.

Reagierender Iframe in rohem HTML

<!DOCTYPE html> <html>
<head> <title>
iframe
testing</title> <meta
name="
description"/> <meta
name="author"/> <style>.iframe-container
{Position:
relativ; Höhe:
800px; Überlauf:
versteckt; }.iframe-container
iframe {Position
: absolut;

oben:

0;
links: 0;
Breite: 100%;
Höhe: 100%; }</style>

</head>
<body> <header></header>
<section>
<div class="iframe-container
"> <iframe
src="https://
subdomain.phorest.me/book" width="900" height="800" frameborder="0"></iframe> </div> </section>
<footer></footer>
</body>
</html>

Nachdem dies geschehen ist, wird das Online-Buchungs-Widget nun mit der Breite des Bildschirms verkleinert

Integrieren eines reaktionsschnellen iFrames in ein Web Builder CMS

Um einen Web-Builder zu verwenden, müssen Sie nur den iFrame-Code in einen HTML-Block oder Code-Snipper-Abschnitt einfügen

In HTML-Block einzufügen

<section> <div
class="iframe-container"> <iframe src=
"https://subdomain .phorest.me/book" width="900"height="800" frameborder="0"><</iframe> </div> </section>

Wird im Abschnitt Styling/Custom CSS eingefügt:

.iframe-container {Position
: relativ;
Höhe: 800px;
Überlauf: versteckt; }

.iframe-container iframe {Position
: absolut;
oben: 0;
links: 0;
Breite: 100%;
Höhe: 100%;
}

War dieser Beitrag hilfreich?
0 von 0 fanden dies hilfreich