search

anythingcodes / highlight-share

Medium-like text selection sharing without dependencies
MIT License
98 stars 14 forks source link

How to use in a HubSpot template? #4

Closed arinker closed 6 years ago

arinker commented 6 years ago

Is there a way to implement highlight-share in a HubSpot template?

arinker commented 6 years ago

I got that far with a minimum example:

<script src="https://cdn2.hubspot.net/hubfs/2998488/assets/js/highlight-share.js"></script>

<script type="module">
    var highlightShare = window.highlightShare;

    import * as emailSharer from "https://cdn2.hubspot.net/hubfs/2998488/assets/js/email.js";

    const selectionShare = highlightShare({
        selector: '.post-body',
        sharers: [emailSharer]
    });

    selectionShare.init();
</script>

And that's the output of my debug console:

email.js:1 Uncaught TypeError: Cannot read property 'HighlightShareViaEmail' of undefined
    at email.js:1
    at email.js:1
arinker commented 6 years ago

Can you help me?

anythingcodes commented 6 years ago

Hey @arinker - thanks for your patience on this, I've updated the dist/ JS file so it includes all of the share options by default (save for Facebook Messenger, since that requires a Facebook app ID). Take a look at the demo here, and check out the referenced CSS/JS files: https://codepen.io/anythingcodes/pen/JBaGQz

You should be able to save those CSS and JS files and reference them within your HubSpot template, similar to the demo.

Ideally, you'd use Webpack, Gulp, Grunt, or another bundler to bundle the JS/CSS files so you can include only the sharers you'd like to use. You can see a demo for that in the src/index.js file of this code sandbox: https://codesandbox.io/s/m7yk3k378

Hope that helps!

arinker commented 6 years ago

Hi @anythingcodes!

Thank you so much for your guidance. It works perfect! https://blog.kwp-inside-hr.com/zielgerichtete-kompetenzentwicklung

All the best, Arno