Positioning of Theme Extension Embed App Block

[pradhummna]

Hey everyone, I am currently building a Shopify app. I am new to the whole process, but the documentation has been beneficial so far. A part of the app is to have a button that clients can put anywhere in their store. So, I created a theme extension app and the button as an embedded app block. However, I am struggling to allow users to place it anywhere rather than in a fixed position (it's like a chat bubble in the bottom right as of now). Also, I am 100% clear on how code distinguishes between App Block and App Block Embed. I used this example https://github.com/Shopify/theme-extension-getting-started/blob/main/blocks/app-embed.liquid  to build what I have so far.

My code so far.

<button is='bankless-checkout'>Checkout with Bankless</button>

<style>
    button[is='bankless-checkout'] {
        position: fixed;
        bottom: 15px;
        right: 15px;
        height: 40px;
        background-color: black;
        color: white;
        border-radius: 10px;
        cursor: pointer ;
        z-index: 100;
        outline: inherit;
        font: inherit;
        font-size: 16px;
        font-weight: 600;
        padding: 5px;
    }
</style>

{% schema %}
{
    "name": "Bankless Checkout",
    "target": "body",
    "javascript": "bankless-checkout.js",
    "settings": []
}
{% endschema %}}

Edit: I have just realized that I can set the target as only one from section/head/body. Ideally, I want this to be in Navbar.

Can anyone help me with this?

[firat]

after a year, there is no clear solution that witten anywhare

[siddhesh2106]

Even after 2 years there is no answer @pradhummna @firat were you able to find any good resource to understand how we can build app embedded blocks? I have found lot of apps using this but I am not sure how exactly they are doing it.