Widget in header

Above the widget is embedded directly in the header of the page. For the design it was necessary to add an extra CSS file. First you have to tell us that you want to load your own CSS file into the widget. We will activate the option in your personal widget page. Then you can set the link to your file as an Object property of window.BUSINESSNAMEGENERATOR:

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

    // custom
    window.BUSINESSNAMEGENERATOR = {
        url    : "YOUR_PERSONAL_WIDGET_URL",
        cssFile: "YOUR_CUSTOM_CSS_FILE_URL",
    };

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

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

The design above has been achieved with the following CSS code:

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