Nonprofits
      Back to home
      1. Help Center
      2. Nonprofits

      Troubleshooting: Giving Embed & WordPress

      Below is a quick walkthrough of a way to separate the styling of the giving embed code and your WordPress site styling.

      Question: How do I know if this is effecting me?

      Answer: When you look at your site before adding the embed code and see a difference in font-size or other styling compare to after you add the embed code you may be effected by this. Please note that due to the modular ability of WordPress this could also be due to themes or plugins effecting the styling as well. 

       

      Below are some steps to add the Embed code into an iframe on your WordPress site so that the stylings won't overwrite one another. 

       

       

      Finding the Embed Code

      Step 1: Log into the application

      Step 2: Hover over Giving and then click on Forms

      Step 2

       

      Step 3: Click on the form you would like to place on your WordPress site

      Step 3

       

      Step 4: Click on the Embed Code & Click Copy Embed Code

      Step 5

       

       

      Adding the code to your WordPress site

      Step 1: Login to your WordPress site

      Step 2: Access your preferred FTP or SFTP. If you do not have an FTP or SFTP we recommend doing steps 3 to 6 otherwise you can skip 7. 

      Step 3: Go to Plugins and click Add New

      Step 3b

       

      Step 4: Search for a "file manager" plugin. We recommend using something like "File Manager by mndpsingh287"

      Step 4b

       

      Step 5: Click Install Now and once the install is done click Activate

      Step 6: Click on the WP File Manager

      Step 6b

      Step 7: Create a new ".html" file in your WordPress site; right click on the fifth icon from the left and select HTML: HTML document. We recommend naming it something easy to remember like donate-1.html

      Step 7b

      Step 8: Edit the newly created file

      Step 8

      Step 9: The image on the left is a default format we created and added to the edit of the new html. The image on the right is a exact copy of the code from the Finding the Embed Code steps. From here we are going to slightly adjust the code. 

      Step 9

       Left image code

      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Ribbon Embed</title>
        <link
          rel="stylesheet"
          href="https://aarib-public-bucket.s3.amazonaws.com/donation-embed-v3/ribbon-donation-embed.css"
        >
      </head>
      <body>
        
      </body>
      </html>

       

      Step 10: Take the highlighted code on the right and move in into the left. Make sure to save your document by clicking "Save As" afterwards.

      Before

      Step 10 Before

      After:

      Step 10 After

      After code: 

      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Ribbon Embed</title>
        <link
          rel="stylesheet"
          href="https://aarib-public-bucket.s3.amazonaws.com/donation-embed-v3/ribbon-donation-embed.css"
        >
      </head>
      <body>
        <div id="app"></div>
      <div class="ribbon-donation-embed-container">
      <ribbon-donation-embed
                  id="ribbon-donation-embed"
                  form_uuid="PLACEHOLDER_CODE"
                  dialog="false"
                />
      <script type="module" crossorigin src="https://aarib-public-bucket.s3.amazonaws.com/donation-embed-v3/ribbon-donation-embed.js"></script>
      </div>
        </body>
      </html>

      *** Please note if you are just copying the above "After Code" please make sure the follow items are correct based on the code copied in the Finding the Embed Code steps. 

      • form_uuid="PLACEHOLDER_CODE"
      • href="https://aarib-public-bucket.s3.amazonaws.com/donation-embed-v3/ribbon-donation-embed.css"
      • src="https://aarib-public-bucket.s3.amazonaws.com/donation-embed-v3/ribbon-donation-embed.js"

       

       

      Inserting the code to your WordPress page

      Step 1: Go to your page you would like to add the new form to by hovering on Pages and clicking All Pages

      Step 1 c

      Step 2: Click Edit on the page

      Step 2 c

      Step 3: Click on the "+" button and select "Custom HTML". Please note this and the next two steps may look different depending on your theme or plugins used. 

      Step 3 c

      Step 4: Add the following code. Please note the src will change based on what you name your file and where it is located. 

      Step 4 c

      Code for above image: 

      <iframe width="100%" height="600" style="border: 0; overflow: hidden;" scrolling="no" src="donate-1.html" ></iframe>

       

      Step 5: Click Save or Update in the upper right hand corner.

      Step 5 c

      Step 6: After this please view your page, you may need to try in an incognito window to see the styling changes.