Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add page to generate/preview HTML snippets for Tally launch announcement banner in other sites #37

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add page to generate/preview HTML snippets for Tally launch announcement banner in other sites #37

wants to merge 1 commit into from
+363 −0

Conversation

cairomassimo
Copy link
Contributor

@cairomassimo cairomassimo commented Jan 11, 2022 •
edited
Loading

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.


Screenshot from 2022-01-11 13-17-56

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 -->

@henryboldi
Copy link
Contributor

I'll take a look at this tomorrow! @cairomassimo 🙌

@cairomassimo cairomassimo marked this pull request as draft March 21, 2022 18:53
@cairomassimo cairomassimo force-pushed the feature/tally-banner-self-service branch from ec9169d to 8a1c00c Compare March 22, 2022 14:24
@cairomassimo cairomassimo marked this pull request as ready for review March 22, 2022 14:25
@puppycodes
Copy link
Contributor

Hey yall circling back on this. Important still?

@greg-nagy
Copy link
Contributor

greg-nagy commented Oct 4, 2022 •
edited
Loading

I would wait for a signal from GTM before picking this up
(they don't monitor github afaik)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@Shadowfiend Shadowfiend

@henryboldi henryboldi

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

JS Snippet
5 participants
@cairomassimo @henryboldi @puppycodes @greg-nagy @Shadowfiend