Transparent Embeds

Update July 2018: This post is outdated. To change the style of your forms, use the embed wizard instead.

GivingTools online giving enables you to embed forms into your website, making them look like a part of your site. To do it, you use a code snippet found in your dashboard under the Giving Form you wish to embed. That code is great for most sites, providing a scalable and attractive presentation that looks great.

However, if the background of your site is not white, the white form looks a little less native. With a little editing of the embed code, though, you can make your embedded appeal do this:

How? Simply add one of these bits of code to the end of the embed code:

  • For a opaque background (white), grey-ish text: ?style=normal (this is the default mode so `normal` isn’t required)
  • For a transparent background, white text (as demonstrated above): ?style=bg-transparent–fg-white
  • For a transparent background, black text: ?style=bg-transparent–fg-black

You would want to add “?style=bg-transparent–fg-white” to the end of the embed code GivingTools provides. For example:

<iframe id="gtEmbedFrame_1" src="https://givingtools.com/give/embed/1?style=bg-transparent--fg-white" style="border:0; width:100%;"></iframe>
<script src="https://givingtools.com/assets/js/iframeResizer.min.js" integrity="sha256-kjBnXrBNDceEMg278ZjsCUEJ8VrWP2Tp158N9u7Yhdk=" crossorigin="anonymous" onload="iFrameResize({}, '#gtEmbedFrame_1');"></script>

And transparent background or not, don’t forget to snag a security certificate for the page you embed on. Get one free here.

2 Replies

Leave a Reply

Your email address will not be published. Required fields are marked *