So erstellen Sie ein Popup mit React

Das Hinzufügen bestimmter Elemente zu einer Website führt zu einer erheblichen Veränderung. Sie können sich von Ihren Mitbewerbern abheben und die Aufmerksamkeit Ihrer Besucher auf sich ziehen, wenn Sie die richtigen Schritte befolgen.

Um die Verkaufsumsätze zu steigern und mit Ihren Besuchern zu interagieren, können Sie von Popups profitieren! Pop-ups eignen sich hervorragend, um ein bestimmtes Publikum über ein wichtiges Thema zu erreichen. Popups sind für Sie da, wenn Sie eine Ankündigung machen oder ein Produkt bewerben möchten.

Es gibt viele verschiedene Lösungen, um Popups zu erstellen. Sie können verschiedene Programmiersprachen und Codes verwenden, während Sie ein Popup-Fenster für Ihre Website erstellen. Mit ein wenig Geduld und Recherche kannst du sie mit React selbst erstellen.

In diesem Blogbeitrag haben wir erklärt, was ein React-Popup ist und wie Sie ein React-Popup-Fenster für Ihre Website erstellen.

Lass uns anfangen!

Was ist React Popup?

React ist eine Open-Source-JavaScript-Bibliothek, die zum Erstellen von Benutzeroberflächen verwendet wird. Es ist ein kostenloses Tool, das von Meta für UI-Komponenten erstellt wurde. Es macht die JS-Codierung mit Entwicklertools und Vorlagendesign funktionaler.

Außerdem ist React eine kompetente und einfach zu übernehmende Bibliothek, die Sie auf Ihrer Website verwenden können. React ist ein leistungsstarkes Tool zum Erstellen von Popups und Modals. Es ist einfach zu bedienen und vielseitig, was es zu einer ausgezeichneten Wahl für viele Anwendungen macht.

React Popup hat viele Vorteile, einschließlich der Fähigkeit:

• Popups einfach erstellen und anpassen.
• Erstellen Sie React-Popup-Modals , die reagieren.
• Erstellen Sie Popups, die auf verschiedenen Geräten gut aussehen.

Wie erstelle ich ein Reaktions-Popup?

Es gibt verschiedene Möglichkeiten, ein Popup mit React zu erstellen. Wir zeigen Ihnen, wie Sie anpassbare React-Popups erstellen können. Sie können Ihr eigenes Popup für Ihre Website erstellen, indem Sie sich diese Lösungen ansehen.

Mit React können Benutzer wiederverwendbare Komponenten erstellen, sodass das Erstellen von Popup-Komponenten einfacher wird. Um beispielsweise ein Modal mit React JS zu erstellen, können Sie einer Popup-Komponente das Attribut „modal“ hinzufügen.

Erstellen eines einfachen Popups mit Triggern und Anpassen

Das Erstellen von React-Popups mit Reactjs-Popup ist praktisch, wenn Sie die erforderlichen Komponenten installieren. Nach der Installation von „reactjs-popup“ mit „npm“ und „garn“ können Sie die Elemente hinzufügen, die Sie für Ihr Popup benötigen.

Sie können das zuvor erstellte Modal anpassen, indem Sie verschiedene Funktionen hinzufügen. Sie können Ihrer Website beispielsweise einen Code hinzufügen, der so aussieht:

 import React from 'react';import Popup from 'reactjs-popup'; export default () => ( <Popup trigger={<button className="button"> Open Modal </button>} modal nested > {close => ( <div className="modal"> <button className="close" onClick={close}> &times; </button> <div className="header"> Modal Title </div> <div className="content"> {' '} Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum. Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates delectus doloremque, explicabo tempore dicta adipisci fugit amet dignissimos? <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit commodi beatae optio voluptatum sed eius cumque, delectus saepe repudiandae explicabo nemo nam libero ad, doloribus, voluptas rem alias. Vitae? </div> <div className="actions"> <Popup trigger={<button className="button"> Trigger </button>} position="top center" nested > <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni omnis delectus nemo, maxime molestiae dolorem numquam mollitia, voluptate ea, accusamus excepturi deleniti ratione sapiente! Laudantium, aperiam doloribus. Odit, aut. </span> </Popup> <button className="button" onClick={() => { console.log('modal closed '); close(); }} > close modal </button> </div> </div> )} </Popup>);

Zusammen mit diesem Code können Sie durch Hinzufügen des folgenden Codes die Details Ihres Popups anpassen. Reaktive Popup-Elemente wie Breite, Schriftgröße, Textausrichtung, Position, Rand, Hintergrund und Polsterung Ihres Popups können beispielsweise angepasst werden.

 .modal { font-size: 12px;}.modal > .header { width: 100%; border-bottom: 1px solid gray; font-size: 18px; text-align: center; padding: 5px;}.modal > .content { width: 100%; padding: 10px 5px;}.modal > .actions { width: 100%; padding: 10px 5px; margin: auto; text-align: center;}.modal > .close { cursor: pointer; position: absolute; display: block; padding: 2px 5px; line-height: 20px; right: -10px; top: -10px; font-size: 24px; background: #ffffff; border-radius: 18px; border: 1px solid #cfcece;}

Nachdem Sie diese beiden Codes zum Code-Injection-Teil Ihrer Website hinzugefügt haben, kann Ihr Reaktions-Popup-Fenster wie folgt aussehen:

(Quelle)

Erstellen von Eingabeaufforderungs-Popups mit React

Aufforderungs-Popups sind nützlich, wenn Sie auch Informationen von Ihren Besuchern sammeln möchten. Mit Prompt-Popups können Sie Ihre Besucher je nach Bedarf nach Namen, E-Mail-Adressen und so vielen anderen Dingen fragen.

Sie können Formulare erstellen, um Daten von Ihren Besuchern zu sammeln. Außerdem ist das Sammeln von Feedback von Ihren Besuchern eine großartige Möglichkeit, Ihre Website mit sofortigen Popups zu optimieren.

Sie können ein Eingabeaufforderungs-Popup mit React hinzufügen, indem Sie einen Code verwenden, der wie folgt aussieht:

 /** The prompt content component */ class Prompt extends React.Component { constructor(props) { super(props); this.state = { value: this.props.defaultValue }; this.onChange = (e) => this._onChange(e); } componentDidUpdate(prevProps, prevState) { if (prevState.value !== this.state.value) { this.props.onChange(this.state.value); } } _onChange(e) { let value = e.target.value; this.setState({value: value}); } render() { return <input type="text" placeholder={this.props.placeholder} className="mm-popup__input" value={this.state.value} onChange={this.onChange} />; } } /** Prompt plugin */ Popup.registerPlugin('prompt', function (defaultValue, placeholder, callback) { let promptValue = null; let promptChange = function (value) { promptValue = value; }; this.create({ title: 'What\'s your name?', content: <Prompt onChange={promptChange} placeholder={placeholder} value={defaultValue} />, buttons: { left: ['cancel'], right: [{ text: 'Save', key: '⌘+s', className: 'success', action: function () { callback(promptValue); Popup.close(); } }] } }); }); /** Call the plugin */ Popup.plugins().prompt('', 'Type your name', function (value) { Popup.alert('You typed: ' + value); });

Wenn Sie diesen Code zum Hauptteil Ihrer Website hinzufügen, kann er so aussehen:

(Quelle)

Verwenden Sie den Popup-Builder Popupsmart für Ihre Website

Wenn Sie sich nicht mit dem Programmieren mit React JS beschäftigen möchten, können Sie Popups auch mit Popupsmart erstellen. Popupsmart ist ein No-Code-Popup-Builder, der einfach zu bedienen und kostenlos ist!

Popupsmart unterstützt Sie beim Erstellen von kampagnengesteuerten Popups für Ihre Website. Sie können beim Erstellen Ihres Popups verschiedene Funktionen von Popupsmart verwenden. Es gibt viele Layouts, aus denen Sie für Ihr Popup auswählen können.

Außerdem können Sie Ihre Zielgruppe so einstellen, dass sie Ihre Besucher richtig erreicht.

Schauen wir uns Schritt für Schritt an, wie Sie mit Popupsmart ein Popup erstellen können.

Zunächst müssen Sie sich anmelden, falls Sie dies noch nicht getan haben. Gehen Sie dann zum Dashboard und klicken Sie auf den Teil „Neues Popup erstellen“ , um mit der Erstellung Ihres Popups zu beginnen.

Zweitens müssen Sie Ihr Geschäftsziel auswählen. Wir haben sechs verschiedene Geschäftsziele, die Sie für verschiedene Ziele Ihres Unternehmens auswählen können.

Mit Popups, die mit Popupsmart erstellt wurden, können Sie:

• Erweitern Sie Ihre E-Mail-Liste und sprechen Sie Ihre Besucher an.
• Zeigen Sie Ihren Kunden eine Ankündigung Ihrer Produkte und Dienstleistungen.
• Halten Sie sich an die Cookie-Gesetze und holen Sie die Zustimmung Ihrer Besucher zum Speichern von Cookies ein.
• Steigern Sie die Telefonanrufe und bauen Sie auf altmodische Weise stärkere Beziehungen zu Ihren Besuchern auf.
• Bewerben Sie Ihre Produkte und Dienstleistungen, indem Sie Ihrem Publikum Sonderangebote präsentieren.
• Sammeln Sie die Formularübermittlung, um persönliche Informationen und Daten Ihrer Besucher zu sammeln und deren Benutzererlebnis zu verbessern.

Für diesen Leitfaden zur Popup-Erstellung verwenden wir das Ziel „Für Ihre Produkte werben“ .

Nachdem Sie Ihr Ziel ausgewählt haben, wird der Popup-Builder-Bildschirm angezeigt. Im Bereich „Layouts“ können Sie ein für Ihre Website geeignetes Layout auswählen. (Wir haben so viele Möglichkeiten!)

Nachdem Sie Ihr bevorzugtes Layout ausgewählt haben, klicken Sie auf den Teil „Weiter zum Anpassen“ . Es leitet Sie zum Teil "Anpassen" weiter, wo Sie mit Ihrem Popup frei spielen können!

Beispielsweise können Sie die Bild-, Überschriften- und Beschreibungsteile eines Layouts entsprechend Ihrem Unternehmen bearbeiten.

Stellen Sie sicher, dass Sie CTA-Phrasen zu Ihrem Popup hinzufügen, damit Ihr Publikum mit Ihrem Popup interagieren kann! Es kann auch nützlich sein, das Layout Ihres Popups an den Gesamtstil und die Persönlichkeit Ihrer Website anzupassen.

Wenn Sie mit der Anpassung Ihres Popups fertig sind und sichergestellt haben, dass es bemerkenswert aussieht, klicken Sie auf den Teil „Next to teaser“ .

Abgesehen davon können Sie das Ziel Ihres Popups optimieren. Im Abschnitt „Ziel“ können Sie auf „Besucherverhalten“ klicken, um auszuwählen, wie Sie Ihre Besucher ansprechen möchten.

Es gibt verschiedene Targeting-Optionen, die Sie entsprechend Ihrem Geschäftsziel auswählen können. Wenn Sie mit diesem Teil fertig sind, klicken Sie auf die Schaltfläche „Weiter zur Veröffentlichung“ .

Im Abschnitt „Veröffentlichen“ können Sie sehen, dass es möglich ist, Ihre Popups mit Google Analytics zu integrieren. Außerdem können Sie in diesem Abschnitt die „E- Mail-Benachrichtigungen an Befragte“ und den „On-Click-Popup-Button-Ersteller“ optimieren.

Sie können den Popupsmart-Code im Teil "Veröffentlichen" sehen.

Wenn Sie mit der Erstellung Ihres Popups fertig sind, fügen Sie den Einbettungscode Ihres Popups zum Code-Injection-Teil Ihrer Website hinzu. Sie können es einfach vor dem schließenden </body> -Tag hinzufügen. Außerdem können Sie Popups mit Google Tag Manager zu Ihrer Website hinzufügen.

Klicken Sie auf die Schaltfläche "Speichern und veröffentlichen" , wenn Sie fertig sind und loslegen können!

Hier ist das endgültige Aussehen des Popups, das wir erstellt haben, um ein Produkt zu bewerben:

Ganz einfach, oder? Jetzt können Sie Ihr eigenes Popup erstellen, um Ihre Produkte oder Dienstleistungen zu bewerben und die Verkaufszahlen zu steigern!

Popupsmart lässt sich in viele Marketing-Tools und Websites wie Mailchimp, HubSpot, Shopify, Sendinblue, Squarespace integrieren; was den digitalen Marketingprozess von Unternehmen noch besser macht.

Einpacken

Das Erstellen von Popup-Fenstern mit React, einer Open-Source-JS-Bibliothek, ist möglich und einfach anzupassen. Wie wir erklärt haben, kann das Hinzufügen eines Popups zu Ihrer Website mithilfe von React einfach sein, wenn Sie mit der Programmiersprache Javascript vertraut sind. Sie können React JS auf Ihrer Website installieren und Ihre modalen Popups erstellen.

Es ist auch möglich, bestimmte Elemente eines Popups wie Breite, Hintergrund, Schriftgröße usw. anzupassen. Dank verschiedener Anpassungsoptionen können Sie Ihr eigenes Popup erstellen, um Ihre Geschäftsziele zu erreichen.

Andererseits muss sich nicht jeder damit befassen, Codes zu schreiben und weitere Codes hinzuzufügen, um sein Popup anzupassen. Sie können unseren Popup-Builder Popupsmart verwenden, der einen kostenlosen Plan hat.

Wir hoffen, dass Ihnen das Lesen dieses Themas gefallen hat und Sie erfahren haben, wie Sie mit React und Popupsmart ganz einfach ein Popup erstellen können. Teilen Sie uns mit, für welche Popup-Lösung Sie sich für Ihre Website entscheiden. :-)

Sehen Sie sich auch diese Blogbeiträge an:

• So erstellen Sie modale Vue-Popups
• So erstellen Sie ein PHP-Popup für Ihre Website
• Wie erstelle ich ein Bootstrap-Popup für Ihre Website?
• Best Practices für das Popup-Design, die Kunden zum Kauf animieren
• So erstellen Sie modale Tailwind-CSS-Popups für Ihre Website
• 21 Headless-CMS-Plattformen, die Sie sich ansehen sollten