Technical tips for embedding the smart donation window on your website

Do you want to embed the smart donation window on your website and are not sure how to design it correctly? That's what we're here for!

First you need to generate the embed code with the help of the guide in this Link. After you have received the code, we will move on to the technical details of the implementation (it is recommended to use the person responsible for handling your website for this guide)

Embedding in the Body of the Site:

Width:
- For desktop or tablet (computer), the panel is an iframe set to occupy 100% width of the outer container (e.g., a div), but it looks best when the container width is between 440px and 550px.
- For mobile (phone), it is recommended to set the outer container to a width of 100%.

Height:
- The iframe comes with a default height of 557px, which can be adjusted according to the final height of the panel. For instance, if "packages" are added, increasing the height of the iframe might be necessary to avoid a scroll bar.

Location:
- When the donation panel appears in a row without additional elements, it's recommended to center it on the screen. This can be achieved, for example, by adding `margin: 0 auto` to the container or by using flexbox.

---

Embedding in WiX Sites:

To facilitate embedding on WiX websites, follow these steps:

1. Add the domain "filesusr.com" to the list of domains in the charity area, in addition to your website's domain, and submit it for approval.

2. Once the domains are approved, log into your WiX account and navigate to the Edit Site area.
To proceed with the following actions, activate Dev Mode. Activate Dev Mode by clicking on "Dev Mode" and then selecting "Turn on Dev Mode."

3. Click on Add (+ sign) then on Embed, and then on Embed HTML.

4. Click on the widget you added and replace the existing ID (for example "html1") with "jgiveEmbed"

5. Inside the widget, click on Enter code, select the Code option and paste in the text box the embed code that you copied from the charity area.

6. In the custom code entry area (in the panel below) paste the following code:

import wixLocation from 'wix-location';

$w.onReady(function () {

$w('#jgiveEmbed').postMessage(wixLocation.query)

});

(To copy the code, drag the mouse from the upper left to the lower right while clicking, we apologize for the inconvenience)