(Epic 1 - User Engagement and Conversion) As a visitor, I want to be prompted with clear calls to action to explore how I can contribute, so that I can easily decide how to engage with the organization.

[SherryW14]

Acceptance Criteria:

• Primary CTAs are visible without scrolling on desktop and mobile devices.

• "Become a partner" CTA directs sponsors to a partnership inquiry form (link coming up soon).

• "Join us" CTA directs future volunteers to the sign up page

"Join us" CTA Embed code

Paste this HTML code snippet on the page where you want the embed to appear.

<iframe data-tally-src="https://tally.so/embed/3jMe1x?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1" loading="lazy" width="100%" height="1" frameborder="0" marginheight="0" marginwidth="0" title="Thank you for your interest in CodeforBC!"></iframe><script>var d=document,w="https://tally.so/widgets/embed.js",v=function(){"undefined"!=typeof Tally?Tally.loadEmbeds():d.querySelectorAll("iframe[data-tally-src]:not([src])").forEach((function(e){e.src=e.dataset.tallySrc}))};if("undefined"!=typeof Tally)v();else if(d.querySelector('script[src="'+w+'"]')==null){var s=d.createElement("script");s.src=w,s.onload=v,s.onerror=v,d.body.appendChild(s);}</script>

Alternatively, simply paste this embed link in the editor of a no-code tool (Notion, Ghost, Canva, etc). To enable dynamic height, you will also need to include the script tag in the section of your website.

https://tally.so/embed/3jMe1x?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1

<script async src="https://tally.so/widgets/embed.js"></script>

Save website page and query parameters
Your website's page and all query parameters will be automatically forwarded to the Tally form and could be saved using hidden fields. For example, if your page's URL looks like the one below and you have hidden fields for originPage, ref and email, you will see originPage=/register, ref=downloads and email=alice@example.com in your form submissions. This is enabled only if you use the HTML snippet or JavaScript.

https://company.com/register?ref=downloads&email=alice@example.com

Use JavaScript
Take a look at the instructions below and share them with your developers.

// Include the Tally widget script in the section of your page

<script src="https://tally.so/widgets/embed.js"></script>

// Add the embed in your HTML

<iframe data-tally-src="https://tally.so/embed/3jMe1x?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1" loading="lazy" width="100%" height="2442" frameborder="0" marginheight="0" marginwidth="0" title="Thank you for your interest in CodeforBC!"></iframe>

// Load all embeds on the page
Tally.loadEmbeds();

[SamHuo213]

As part of this ticket, please update image

[SamHuo213]

IFrames are generally a security issue. Is it possible to re-route to Tally instead.

[SamHuo213]

Please note, we are missing this from the figma as well:

[SherryW14]

Update: contact form for potential sponsors

Embed code
Copy the code below and paste it in your web page's HTML. Make sure to replace all the HTML on the page with the code below. If the code is wrapped within other content, it won't be displayed as expected.

<title>We would love to get connected!</title> <script async src="https://tally.so/widgets/embed.js"></script> <style type="text/css"> html { margin: 0; height: 100%; overflow: hidden; } iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0; } </style> <iframe data-tally-src="https://tally.so/r/m6kvQP?transparentBackground=1" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0" title="We would love to get connected!"></iframe>

Save website page and query parameters
Your website's page and all query parameters will be automatically forwarded to the Tally form and could be saved using hidden fields. For example, if your page's URL looks like the one below and you have hidden fields for originPage, ref and email, you will see originPage=/register, ref=downloads and email=alice@example.com in your form submissions.
https://company.com/register?ref=downloads&email=alice@example.com