houdini/app/views/nonprofits/button/advanced.html.erb

<%- # License: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later -%>
<%= content_for :stylesheets do %>
	<%= stylesheet_link_tag 'nonprofits/button/page' %>
<% end %>
<% content_for(:footer_hidden) {'hidden'} %>

<% content_for :javascripts do %>
 <%= javascript_pack_tag 'i18n', 'page__nonprofits__button' %>
<% end %>

<header class='header'>
	<div class='container--mid'>
	<i class='header-icon icon-credit-card'></i>
	<h3 class='header-title'>Donate Form Builder</h3>
	<%= render 'tabs', active: :advanced %>
	</div>
</header>


<div class='container--mid advanced'>

	<section>

		<div class='no-js'>
			<h3>Quick setup</h3>

			<h5>Embed the form directly on your page using an iframe</h5>

			<textarea readonly class='codeText'>
				<iframe frameborder='0' width='390' height='410' src="<%= request.base_url %>/nonprofits/<%= @nonprofit.id %>/donate?offsite=t&mode=embedded"></iframe>
				<script>var iframe = document.getElementsByTagName('iframe')[0]; iframe.setAttribute("src", iframe.src + window.location.search)</script>
			</textarea>

			<h5>Use a basic link that opens the form in a new window</h5>

			<textarea readonly class='codeText' rows='1'><a href="<%= request.base_url %>/nonprofits/<%= @nonprofit.id %>/donate" target="_blank">Donate</a></textarea>

			<p>You can provide any image or text inside the above link.</p>
		</div>


		<div class='yes-js'>
			<h3>More options</h3>

			<h5>Include the script on your website</h5>
			<p>Include the Donate Button SDK somewhere within the HTML of your page. Include this script only once on your site.</p>

			<%= render 'include_snippet' %>

			<h5>Get a basic donate button</h5>

			<p>Place an empty link with 'commitchange-donate' as the class wherever you want the button to appear.</p>

			<textarea readonly class='codeText' rows='1'><a class='commitchange-donate'></a></textarea>

			<h5>Embed the form directly in your page</h5>

			<p>You can embed the donation form directly into your page by adding the "data-embedded" attribute.</p>

			<textarea readonly class='codeText' rows='1'><a class='commitchange-donate' data-embedded></a></textarea>

			<h5>Add a custom button image or text</h5>

			<p>If you want to provide some custom text or a custom image for the donate button, add the "data-custom" attribute.</p>

			<textarea readonly class='codeText' rows='1'><a class='commitchange-donate' data-custom>Your Custom Button Text or Image</a></textarea>

			<h5>Automatically add a preset designation</h5>

			<p>To preset a custom designation for every donation made through the button, set the "data-designation" attribute.</p>

			<textarea readonly class='codeText' rows='1'><a class='commitchange-donate' data-designation="Back to School Program"></a></textarea>

			<p>You can also provide a description of your designation using the "data-designation-desc" attribute.</p>

			<textarea readonly class='codeText' rows='2'><a class='commitchange-donate' data-designation="Back to School Program" data-designation-desc="Provide backpacks and school supplies for first graders."></a></textarea>

			<h5>Preset a custom single amount</h5>

			<p>To provide a preset single amount for the button, use the "data-single-amount" attribute. Set its value to an amount <strong>in dollars</strong>.</p>
			<p>For example, for a button that only takes $15 donations:</p>

			<textarea readonly class='codeText' rows='1'><a class='commitchange-donate' data-single-amount="15"></a></textarea>

			<h5>Create custom multiple amounts</h5>

			<p>To provide custom multiple amounts, use the "data-custom-amounts" attribute. You must provide multiple amounts separated by <strong>commas</strong>. Set each amount to <strong>dollars</strong>.</p>

			<textarea readonly class='codeText' rows='1'><a class='commitchange-donate' data-custom-amounts="10.50,20,30,40,50,60,70"></a></textarea>

			<h5>Preset recurring or one-time donations</h5>

			<p>You can set all donations through your button as either recurring or one-time by specifying the <strong>data-type</strong> attribute as either "one-time" or "recurring."</p>

			<textarea readonly class='codeText' rows='1'><a class='commitchange-donate' data-type='recurring'></a></textarea>

			<h5>Redirect donors to a custom thank-you page</h5>

			<p>After the donation is completed, you can have the donor redirect to your own custom thank you page. Give a URL for the <strong>data-redirect</strong> attribute to get this functionality. Be sure to specify "http://" or "https://" in the url.</p>

			<textarea readonly class='codeText' rows='1'><a class='commitchange-donate' data-redirect='<%= request.base_url %>'></a></textarea>


      <h5>Set the campaign</h5>
      <p>Use the ID of the campaign in the <strong>data-campaign-id</strong> attribute for the button (or the "campaign_id" URL parameter). You can find the campaign ID at the top of the campaign page, near the settings buttons, when you are signed in as an admin:</p>

      <textarea readonly class='codeText' rows='1'><a class='commitchange-donate' data-campaign-id=619></a></textarea>

      <p>You can also set a gift option ID. The gift option ID can be found in the 'Manage Gift Options' popup on the associated campaign page</p>

      <textarea readonly class='codeText' rows='1'><a class='commitchange-donate' data-campaign-id='619' data-gift-option-id='13'></a></textarea>

      <h5>Set custom supporter fields</h5>
      <p>You can set the <strong>data-custom-fields</strong> attribute to add custom fields to the info step of the donate form. Each custom field attribute is comprised of two parts separated by an colon character (example: "shirt size: T-shirt size"). The first part is the name of the custom field and the second part is the text to display on the input. If the second part isn't provided, the name of the custom field will be displayed on the input. Each custom field should be separated by a comma. If the custom field doesn't already exist it will be created.</p>
      <textarea readonly class='codeText' rows='1'><a class='commitchange-donate' data-custom-fields='shirt size: T-shirt size, company: Company name'></a></textarea>

		</div><!-- .yes-js -->
	</section>
</div>