Embedding the Ambassador Portal

You can embed the Sonar Seed Ambassador Portal directly into your Shopify storefront. This allows your ambassadors to log in, view campaigns, and manage their tasks without leaving your branded domain.

1. Create a Page Template

First, we need to create a dedicated template for your portal so it renders correctly.

1. Open the Theme Editor (Online Store > Themes > Customize).
2. Click the dropdown menu in the top center (defaults to Home page).
3. Select Pages > Create template.
4. Name it ambassador-portal.
5. Click Create template.

2. Add the Portal Block

Now, add the Sonar Seed application block to your new template.

1. In the sidebar, under the Template section, click Add section.
2. Select the Apps tab.
3. Click Portal Embed under Sonar Seed.
4. Drag the block to position it where you want on the page.
5. Click Save in the top right.

3. Create the Page

Now explicitly create the page and assign it to your new template.

1. Go to Pages in your Shopify Admin.
2. Click Add page.
3. Title it "Ambassador Portal".
4. Select the ambassador-portal tempate (the template you created in Step 1).
5. Set the Visibility to Visible.
6. Click Save.
7. Click View to view the page, and copy the URL.

4. Configure the Page URL

First, you need to tell Sonar Seed where the portal will live on your store. This ensures that all magic links and redirects point to the correct page.

1. In Sonar Seed, go to Settings > Integrations.
2. Find the Storefront Portal section.
3. Enter the full URL of the page you created in Step 3 (e.g., https://your-brand.com/pages/ambassador-portal).
4. Click Save Portal Settings.

5. Verification

To verify everything is working:

1. Visit the page on your live storefront.
2. You should see the Sonar Seed login form embedded on the page.
3. Try logging in with your test ambassador email.
4. Verify that you are redirected back to this same page after clicking the magic link.