Step 1: Select the placeholder option
- Select the last option under the "position" setting in the bar configuration in the App
- Scrolling to the very end, and click the "Save" button to save the change

Step 2: Add Part I
- Go to Admin > Online Store > Themes
- Click the "Actions" button on the right-hand side, and select "Edit code"
- Find theme.liquid from the left-hand side file list and open it
- In the file, find <body id="{{ page_title | handle }}"
- Add following codes right after it. And save the changes.
<div id="qab_placeholder"></div>

Step 3: Add Part II
- Find timber.scss.liquid from the left-hand side file list and open it
- Add following codes at the very end of the file and save the changes.
#qab_background{z-index: 900 !important;}

Enjoy the app
Congratulations. The integration is done.
If you cannot see the bar yet. Please double check Step 1 and make sure you save the settings.