@getchange/change-social-content

UI element that lets shoppers customizer their donation content

Usage no npm install needed!

<script type="module">
  import getchangeChangeSocialContent from 'https://cdn.skypack.dev/@getchange/change-social-content';
</script>

README

change-social-content

<change-social-content
  nonprofitId="n_1234"
    donationId="d_1234"
    publicKey="pk_test_1234"
></change-social-content>

Attributes

Name Description
nonprofitId The ID of the nonprofit for the social media content. The generated content will be tailored to this nonprofit. Find IDs at https://api.getchange.io/nonprofits.
donationId The ID of the donation associated with the social media content. Provide this to unlock advanced insights about your customer's sharing habits. Insights are available at https://api.getchange.io/insights.
publicKey Your public key. Get this at https://api.getchange.io.

Styles

You can style component with the following CSS variables.

Name Description
--share-button-background The background color of the share button.
--share-button-color The text color of the share button.

Example usage

Set the CSS variables directly on the element using the style attribute. You can also apply them to any ancestor element, and the component will inherit them.

<change-social-content
  style="--share-button-background: red; --share-button-color: black;"
></change-social-content>