Einen Namensgenerator als Widget einfach in deiner Seite einbinden

Wir haben nicht nur die wohl coolsten Namensgeneratoren für Firmennamen und Domains. Diese kannst du jetzt auch auf deiner Seite einfach und schnell einsetzen und deine Besucher begeistern.

 

Mehr erfahren  

Deine Vorteile

Verwende das Namensgenerator Widget nach deinen Vorstellungen

Flexibel

Verschiedene Einstellungen.

Mobile

Optimiert für mobile Geräte

Einfach

So wenig Code wie möglich.

Das Widget

Probiere das aus!

Teste das Widget mit allen aktivierten Optionen

arrow-big

Namensgeneratoren Widget Beispiel mit aktivierter "Branche auswählen"-Option.

Widget im Einsatz

Beispiele und Code

Widget in der Seite laden

Du kannst das Namensgenerator Widget direkt in deiner Seite laden. Das Widget sieht so aus, wie oben gezeigt. Wir haben lediglich die Hintergrundbild-Farbe auf #eee geändert, damit das Widget besser zur Geltung kommt.

Das Widget wird in in einem HTML Element mit der ID #iframeContainer geladen. Du kannst den Namen beliebig ändern - wichtig ist dann die korrekte Weitergabe in JavaScript.

Das oben gezeigte Beispiel hat die Option "Branche auswählen" aktiviert. So kannst du deinen Benutzern das Namen-Generieren erleichtern. Lasse einfach bei uns die Option "Branche auswählen" einschalten.

(function () {
    function businessnamegeneratorLoaded () {
        window.BUSINESSNAMEGENERATOR.create('iframeContainer')
    }

    // custom
    window.BUSINESSNAMEGENERATOR = {
        url : 'DEINE_PERSÖNLICHE_URL'
    };

    // widget
    const s  = document.createElement('script');
    s.src    = "https://www.namensgeneratoren.de/widget.js";
    s.async  = true;
    s.onload = businessnamegeneratorLoaded;

    document.head.appendChild(s);
})();
<button class="businessNameGeneratorWidget-action button">
    Namensgenerator öffnen
</button>
<script>
    (function () {
        // custom
        window.BUSINESSNAMEGENERATOR = {
            url : 'DEINE_PERSÖNLICHE_URL'
        };

        // widget
        const s  = document.createElement('script');
        s.src    = "https://www.namensgeneratoren.de/widget.js";
        s.async  = true;

        document.head.appendChild(s);
    })();
</script>

Widget im Popup öffnen

Wenn du das Widget nicht direkt in deiner Seite laden möchtest, dann kannst es in einem Popup aufmachen.

Dafür brauchst du ein (oder mehere) Buttons mit der Klasse businessNameGeneratorWidget-action. Das Widget sucht automatisch nach allen HTML-Elementen mit dieser Klasse. Das iFrame wird in einem Popup aufgemacht.

Tipp! Du kannst problemlos die beiden oberen Widget-Versionen in einem Popup laden.

Teste mich in einem Popup!

Widget im Header deiner Seite

Du kannst das Widget weitgehend so anpassen, dass es sich auch im Header deiner Website gut integriert.

Wenn du auf den Button klickst, öffnest du eine Beispielseite, wo wir das Widget im Header eingebunden haben. Den (relevanten) CSS Code findest du in der Box.

Widget öffnen Öffne neue Widget-Seite!
:root {
    --qui-color-primary: #eee;
    --qui-color-primary-akcent: #333;
    --qui-bng-results-entry-border-color: var(--qui-color-primary);
    --qui-input-border-color: transparent;
}

.BusinessNameGenerator-tool {
    background-image: url('https://images.pexels.com/photos/1655166/pexels-photo-1655166.jpeg?auto=compress&cs=tinysrgb&w=1920');
    padding: 10rem 20px;
    color: #fff;
}

.BusinessNameGenerator-tool-header {
    max-width: 1000px;
    margin: 0 auto;
}

.BusinessNameGenerator-results-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 4rem 0;
}

.BusinessNameGenerator-results {
    background: #fff;
}
Widget öffnen Öffne neue Widget-Seite!

Einfaches Widget

Eine simple Version, wenn du keine extra Features benötigst.

Code zum Einbinden ist gleich (siehe oben). Hier ist die Option "Branche auswählen" deaktiviert.

Widget anpassen

Einstellungen

Du hast die Möglichkeit, das Widget zu individualisieren. Setze eigene Texe oder passe das Design deinem CI an, indem du eine eigene CSS Datei mitgibst.

 

Eigene Texte

Du kannst deine eigenen Texte für Titel und Kurzbeschreibung verwenden. 

"Branche auswählen" aktivieren

Mit der Option erlaubst du deinen Besuchern die gewünschte Branche auszuwählen.

Abstand deaktivieren

Das Widget hat einen Abstand zu allen Rändern. Diesen könnst du entweder per CSS überschreiben oder wir setzen diese Option in deiner personalisierten Widget-Seite fest.

Eigene CSS-Datei

Mit eigener CSS-Datei kannst du das Widget fast unbegrenzt designmässig anpassen.

Kontaktiere uns

Interesse?

Wenn du einen tollen Namensgenerator ganz leicht auf deiner Seite einbinden möchtest, dann schicke uns eine kurze Nachricht. Natürlich auch bei allen Fragen. Danke!