How do you integrate POINT events (via iframe) in your website?

Easily power your website's volunteer page with POINT. When you integrate POINT, events made on POINT will automatically post to your website. With this integration, volunteers can sign up directly from your website!

Want to add your organization’s POINT volunteer opportunities to your website? With our iframe integration, volunteers can sign up right from your website and all of your volunteer data will be automatically captured on your POINT admin dashboard. This also means when you create a volunteer opportunity on POINT, your website will update and display it automatically.

Here's an example of a nonprofit website with the POINT iframe integration.

How to set up an iframe for your website: 

1. Log in to your POINT Dashboard. You must be an Account Owner to access the embed code. From your dashboard you will see a menu on your left. Click “Organization” then “Integrations” and “Website Integration”.
2. Click the orange “+ Add Embed Code” button located near the right middle of the page. 
3. A "Generate Embed Code" pop up form will appear.
4. First, Choose which events you want to display on your website using this iframe. 
   1. If you are a singular nonprofit, we recommend choosing “Only show events that this organization is hosting” as it will pull only your organization’s volunteer events onto your website. 
   2. If you are an organization that wants your website visitors to be able to volunteer with anyone on POINT (such as a religious organization, school, civic organization, business, etc.), we recommend selecting “Show public events for any organization on POINT”. Now your website visitors can volunteer for any POINT event and sign up through your website. 
   3. If you are a national nonprofit/organization with multiple chapters and you have a Network plan, we recommend selecting “Network”. Now all events hosted by any organization in your Network account will be posted on your website.  
5. Next, give this iframe a nickname for your internal organization. Create a name that will tell you what this iframe does or where it lives on your website (for example, “Food pantry events for homepage”) 
6. Next, Choose what buttons you want your iframe to have and how many events it should show per page: 
   1. Choose if your website visitors can filter listed events by things like the date, days of the week, or a location radius by selecting yes or no to “Show filter events”. You can choose whether website visitors can sort events by cause by checking the box for “Show causes filter”.
   2. Then choose how many events are shown on each page. If you have a lot of events each week, we recommend showing more per page. If your volunteer opportunities are spread out (e.g. 2/month) you can choose to display fewer per page. 
   1. If this iframe is being embedded on your homepage, we recommend showing Public or Recommended events, but if it is being embedded on a part of your website that is accessed by only current members of your organization, you can choose to show only Private events as well. Please note: If you embed Private events, only the members invited to that event will be able to sign up for it, even if it is displayed to the public. 
   2. On the Core Legacy and Pro Plans, you can select to show all of the events for a Program by clicking “+ Select a Program”. This will pull in all of the events for that program to your iframe. Next, Select event types that you want to show on the website.
7. Once you've chosen all of your settings - Click “Generate Embed Code”.
8. Now you will see the code for this iframe in your iframes list. 

How to add the iframe code to your website:

1. Log in to your POINT Dashboard. You must be an Account Owner to access the embed code. From your dashboard you will see a menu on your left. Click “Organization” then “Integrations” and “Website Integration”.
2. Scroll until you see the list of all of the iframe codes you have generated. 
3. Under the column for “Actions”, hit the arrow button. A text box with code will be shown. Click “Copy the Embed Code”. You will get a popup message that says “Copied to Clipboard”.
4. Now go to your website builder and just paste the iframe code on the page where you want it. If you do not know how to add the iframe to your website, the Website Integrations page on your dashboard has instructions for popular website builders like Squarespace, Wordpress, and Wix. 
   
   

 How to edit an existing iframe’s embed code:

1. Choose the iframe you want to edit from your list, and click the pencil button. The same builder that you used to create the iframe will pop up. 
2. Change what you need and click “Generate Embed Code”. Now this will be updated in your list. 
3. You will need to paste the new embed code in your website. Under the column for “Actions”, hit the arrow. A text box with code will be shown. Click “Copy the Embed Code”. You will get a popup message that says “Copied to Clipboard”.
4. Now go to your website builder and paste the iframe code on the page where you want it. If you do not know how to add the iframe to your website, the Website Integrations page on your dashboard has instructions for popular website builders like Squarespace, Wordpress, and Wix. 
   
   

How to remove an iframe’s embed code:

1. Choose the iframe you want to delete from your list, and click the trash can button. From there you will see a popup confirming your choice. 
2. Click “Remove” and this iframe will disappear from your list, and any events shown on your website using this iframe will no longer be displayed.
   
   

Why isn’t my iframe showing events?

Since you can generate custom embed codes with multiple variables, make sure that the iframe code you’re using is one that shows the right things. For example, you might have checked “Private Events” when generating your code, but you don’t have any private events on POINT, so your iframe would appear empty. The same thing can happen if you added a program filter when generating your code, so double check that as well. Simply generate a new code using “Public Events” and replace the code on your website to show your events. 

Questions? Email us at  support@pointapp.org.