top of page
Search
Writer's pictureSoSha Staff
2 min read

NationBuilder Integration

NationBuilder is an all-in-one platform that helps organizations, campaigns, and nonprofits manage their communities with tools for website creation, communication, social media, CRM, and fundraising. We’ve integrated with NationBuilder, allowing users to seamlessly embed SoSha toolkits on their pages.


How to Embed a SoSha Toolkit in a Social Share Prompt


Step 1: Create Your SoSha Toolkit


Step 2: Adjust the Custom Theme - See Detailed Instructions here

  • In NationBuilder, create or select a website and go to the "Theme" tab.

  • If you don't have a custom theme, create one and click "Edit."

  • Under the "Files" tab, find and open flashshare.html.

  • In the HTML editor, locate the <div> element containing the NationBuilder share prompt. 

    • Depending on which theme you use, the <div> element may be labeled different. Here are some examples:  

      • bootstrap: <div class=”modal-body”>. 

      • Momentum: <div class="modal-content"> (note in Momentum you will also need to remove the first 4 lines of code)

      • Action: <div class="modal-content"

  • Replace the enter code within this <div> block with this code snippet:


{% assign campaignId = "" %}
{% for tag in flash.page.tags %}
{% if tag.name contains 'sosha:' %}
{% assign campaignIdParts = tag.name | split:'sosha:' %}
{% assign campaignId = campaignIdParts[1] %}
{% break %}
{% endif %}
{% endfor %}
{% if campaignId != "" %}
{% assign uppercase_campaignId = campaignId | upcase %}
{% if campaignId == uppercase_campaignId  %}
<div style="width: 100%; height: 640px; padding: 0;">
<iframe src="https://app.speechifai.tech/campaign/{{ campaignId }}?url={{ flash.page.full_url_with_recruiter | url_encode }}&wp=true" allow="web-share" frameborder="0" scrolling="no" style="width:100.00%; height:100.00%;  -ms-zoom:1.00; -moz-transform: scale(1.00); -moz-transform-origin: 0 0;  -o-transform: scale(1.00); -o-transform-origin: 0 0; -webkit-transform: scale(1.00); -webkit-transform-origin: 0 0;"></iframe>
</div>
{% else %}
<div style="width: 100%; height: 600px"><iframe  src="https://app.sosha.ai/toolkit/{{ campaignId }}?embedded=true&embedHeight=632&showFilters=&sliderEnabled=&showArrows=&iconsColor=%23000000&postBgColor=%23FFFFFF&postTextColor=%23000000&url={{ flash.page.full_url_with_recruiter | url_encode }}" allowfullscreen="allowfullscreen" webkitallowfullscreen="true" mozallowfullscreen="true" allow="camera; web-share; microphone" style="border: none; width: 105%; height: 105%; -ms-zoom: 0.95; -moz-transform: scale(0.95); -moz-transform-origin: 0 0; -o-transform: scale(0.95); -o-transform-origin: 0 0; -webkit-transform: scale(0.95); -webkit-transform-origin: 0 0;" ></iframe></div>
{% endif %}
{% else %}

  • If you would like to create a ‘fall back’ in order to trigger the default share buttons, then add the original code for those buttons in place of the section: 

{% comment %}
  Put default share buttons here
{% endcomment %}

  • Save your changes.


Step 3: Add the Toolkit to the Action Page

  • Go to "Pages" and select the page where you want the SoSha toolkit embedded.

  • Click "Add tag" and paste sosha:{sosha_post_ID} where {sosha_post_ID} is the toolkit ID you copied in Step 1.

    • It should look something like this: sosha:6f45bab1-f841-4349-9974-98499348283d

  • The SoSha toolkit will now replace the NationBuilder share prompt on that page. You can add the same toolkit to multiple pages.



For further customization or troubleshooting, reach out to partners@nationbuilder.com.

bottom of page