taho.xyz
taho.xyz copied to clipboard
tahowallet
Add page to generate/preview HTML snippets for Tally launch announcement banner in other sites
Closes #27. New page at /add-tally-banner-to-your-site allows to customize and preview an HTML snippet, showing a banner announcing Tally launch, meant for other web admins to add to their own site.
Snippet is generated from a React component via renderToString and further text manipulation. Preview is shown in an iframe, with a similarly generated source code.
Customization consists of color scheme (dark, light, blue) and code placement (either anywhere in <head> or manual placement in <body>).
<head> placement uses a <template> and a <script> which pastes the template coontent at the beginning of <body> upon page load.
Example of snippet (dark color scheme, <head> placement):
<!-- TALLY BANNER --><template id="tally-banner-template"><div style="padding:1rem 2rem;background-color:#001413;color:#D08E39;text-align:center;overflow:hidden;font-size:0.875rem;font-family:Helvetica,sans-serif"><div style="float:right;padding:1rem;margin:-1rem 0;margin-right:-2rem;background:none;cursor:pointer" onclick="this.parentElement.remove()">×</div><img style="margin:-0.5rem -0.5rem -2.5rem" src="http://localhost:8000/banner-icon.svg"/>Tally is live. <a style="color:#D08E39" target="_blank" href="https://tally.cash/community-edition">Try it here!</a></div></template><script>window.addEventListener('load',()=>{var d=document;d.body.prepend(d.importNode(d.getElementById('tally-banner-template').content,true))})</script><!-- END TALLY BANNER -->
I would wait for a signal from GTM before picking this up (they don't monitor github afaik)
