# How to embed with knack header?

**URL:** <https://forums.knack.com/t/how-to-embed-with-knack-header/13049>\
**Category:** Get Answers\
**Created:** [September 10, 2022, 4:38am UTC](https://forums.knack.com/t/how-to-embed-with-knack-header/13049 "2022-09-10T04:38:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![knckusr](https://avatars.discourse-cdn.com/v4/letter/k/e95f7d/32.png) [@knckusr](https://forums.knack.com/u/knckusr)\
**Post date:** [September 10, 2022, 4:38am UTC](https://forums.knack.com/t/how-to-embed-with-knack-header/13049/1 "2022-09-10T04:38:35Z")

</div>

As you can see at the following screenshot:

> **[Gyazo](https://gyazo.com/5c77ae945c7c9147b47d1eca4ad641e7/draw)**
>
> Easily capture screenshots, GIFs, and replays that are ready to share. Download the free app for windows and mac.

The app embeds without its header… how can i do to get it with the same header?

---

<div class="post-metadata">

**Author:** ![KnackPros](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/knackpros/32/807_2.png) [@KnackPros](https://forums.knack.com/u/KnackPros)\
**Post date:** [September 10, 2022, 7:12am UTC](https://forums.knack.com/t/how-to-embed-with-knack-header/13049/2 "2022-09-10T07:12:54Z")

</div>

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.

```auto
// 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](https://learn.knack.com/article/jyqtajcj52-embedding-your-app#cms_considerations) in the Knack docs).

Good luck,  
[Knack Pros](https://knackpros.com)

---

<div class="post-metadata">

**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\
**Post date:** [September 22, 2022, 9:18pm UTC](https://forums.knack.com/t/how-to-embed-with-knack-header/13049/3 "2022-09-22T21:18:08Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/b/b85a0553f2d225c2efd279ca64e559e485f327f5.jpeg)