Embed the Period Pin Map Link on Your Website

You can embed a link to the Period Pin map on your website with these easy to follow instructions.

Standard Embeddable
Use the code below to embed our logo and link on your website.
Copy the code and paste it your site’s HTML code wherever you’d like the logo to appear. You may need to set your site editor to HTML mode.
Using WordPress? Add a “Custom HTML” block and paste the code inside, then move the block to where you want the logo to appear. The process is similar for Wix and Shopify sites as well.
Note: this code won’t work on social media sites.

<!--Period Pin Embeddable Logo & Link, French, uses CSS-->

<style>
  /* CSS for responsive design */
  .logo-container {
    max-width: 50%; /* Ensure the logo doesn't exceed the width of its container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure the image is treated as a block element */
    margin: 0 auto; /* Center the image horizontally */
  }
</style>

<a href="https://periodpincanada.wordpress.com" target="_blank" rel="noopener noreferrer">
  <img class="logo-container" src="https://periodpin.ca/wp-content/uploads/2024/11/fdac3-period-pin-fr-1.png" alt="Period Pin - Your map to free menstrual products">
</a>
<!--Image copyright Period Pin, 2023 -->

<!--Period Pin Embeddable Logo & Link, English, uses CSS-->

<style>
  /* CSS for responsive design */
  .logo-container {
    max-width: 50%; /* Ensure the logo doesn't exceed the width of its container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure the image is treated as a block element */
    margin: 0 auto; /* Center the image horizontally */
  }
</style>

<a href="https://periodpincanada.wordpress.com" target="_blank" rel="noopener noreferrer">
  <img class="logo-container" src="https://periodpin.ca/wp-content/uploads/2024/11/23837-period-pin-en-1.png" alt="Period Pin - Your map to free menstrual products">
</a>
<!--Image copyright Period Pin, 2023 -->

Example of embeddable logo+link:

/* CSS for responsive design */ .logo-container { max-width: 50%; /* Ensure the logo doesn’t exceed the width of its container */ height: auto; /* Maintain aspect ratio */ display: block; /* Ensure the image is treated as a block element */ margin: 0 auto; /* Center the image horizontally */ }

Embeddable without CSS / Raw HTML embeddable
If you prefer an embeddable logo that doesn’t include CSS, use the code below. If you’re not sure whether to use this code or the Standard code, use the Standard. Copy the code and paste it your site’s HTML code wherever you’d like the logo to appear.
Using WordPress? Add a “Custom HTML” block and paste the code inside, then move the block to where you want the logo to appear. The process is similar for Wix and Shopify sites as well.

<!--Period Pin Embeddable Logo & Link, French, no CSS-->

<a href="https://periodpincanada.wordpress.com" target="_blank" rel="noopener noreferrer" style="display: block; max-width: 50%; height: auto; margin: 0 auto;">
  <img src="https://periodpin.ca/wp-content/uploads/2024/11/fdac3-period-pin-fr-1.png" alt="Period Pin - Your map to free menstrual products" style="display: block; max-width: 100%; height: auto; margin: 0 auto;">
</a>
<!--Image copyright Period Pin, 2023 -->

<!--Period Pin Embeddable Logo & Link, English, no CSS-->

<a href="https://periodpincanada.wordpress.com" target="_blank" rel="noopener noreferrer" style="display: block; max-width: 50%; height: auto; margin: 0 auto;">
  <img src="https://periodpin.ca/wp-content/uploads/2024/11/23837-period-pin-en-1.png" alt="Period Pin - Your map to free menstrual products" style="display: block; max-width: 100%; height: auto; margin: 0 auto;">
</a>
<!--Image copyright Period Pin, 2023 -->

Create Your Own Image + Link
Prefer not to embed our code, and want to make your own? Follow the steps below.

Save the image: Right click on the logo image below and save to your device.
Upload the image to your site: Log in to your website’s administration area or content management system (CMS). Find the option to upload media or images. This is typically found in the “Media” or “Images” section of your CMS.
Select the image: Click on the option to upload a new image. Choose the image file you saved to your computer in step 1.
Insert the image into a Post or Page: Once the image is uploaded, you’ll typically be given the option to insert it into a post or page. Select the post or page where you want the image to appear.
Add the link: After inserting the image, you can add a link to it. Highlight the image, then click on the “Insert/edit link” button (usually represented by a chain link icon). Enter this URL into the link field: https://periodpincanada.wordpress.com
Save or Publish: Once you’ve added the link, save or publish your post or page to make the changes live on your website.