As you can see at the following screenshot:
The app embeds without its header… how can i do to get it with the same header?
To embed the app including the header, you will need to copy and paste the HTML from the page.
You can add the following code to your custom JavaScript.
// App Header for embedded app
// This is required when embedding because Knack does not embed the header
// Learn more: https://learn.knack.com/article/jyqtajcj52-embedding-your-app#what_is_an_embedded_app
// On all scenes...
$(document).on('knack-scene-render.any', function (event, scene) {
// Show the app header if not present
appHeader()
})
function appHeader() {
const appTitle = Knack.app.attributes.name || 'App'
if ($('#knack-logo').length === 0) {
$('#kn-app-mobile-container').prepend(`
<h1 id="knack-logo" style>
<a href="#${Knack.home_slug}" class="kn-title" address="true">${appTitle}
</a>
</h1>`)
}
}
Note: Embedded apps may look different from the Knack app because of conflicting CSS rules. This can be fixed by adding custom CSS in your Knack app. (See this related article in the Knack docs).
Good luck,
Knack Pros
1 Like
Just circling back on this one as @ian noticed a silent release today (whilst it’s being finalised) of a new check box option to include the app logo and header.
2 Likes