Widget im Header

Oben ist das Widget direkt im Header der Seite eingebunden. Für das Design war es nötig eine extra CSS Datei mitzugeben. Zuerst musst du uns mitteilen, dass du eine eigene CSS Datei in das Widget laden möchtest. Wir aktivieren die Option in deiner persönlichen Widget-Seite. Dann kannst du den Link zu deiner Datei als Object-Eigenschaft von window.BUSINESSNAMEGENERATOR mitgeben:

(function () {
   function businessnamegeneratorLoaded() {
        window.BUSINESSNAMEGENERATOR.create('container-headerExample')
    }

    // custom
    window.BUSINESSNAMEGENERATOR = {
        url    : 'DEINE_PERSÖNLICHE_URL',
        cssFile: 'DEINE_URL_ZU_DER_CUSTOM_CSS_DATEI.css',
    };

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

    document.head.appendChild(s);
})();

Das Design ist mit folgendem CSS Code erreicht worden:

: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;
}