Skip to content
Go to Your Springboard

How to Add Custom Features

Complexity Level: Basic to Advanced

Overview

This page helps you add custom features to your Springboard website.

On this page, you will learn how to:

  • Add custom site code.
  • Turn custom site code on or off.
  • Edit or delete custom site code.
  • Manage external accounts that connect to other services.
  • Add Third-Party Embeds to your website pages.
  • Add and edit website meta tags.
  • Add, edit, and view webhooks.
  • Check that your changes are working the way you expected.

Words used on this page

  • Account: Your organization’s space in the Springboard.
  • Dashboard: A screen that shows lists, buttons, or quick status updates.
  • Page: One screen in the Springboard.
  • Sitewide: Something that works across your whole website.
  • Custom site code: A small piece of code you add to one page or to many pages.
  • External account: A connection to another service you already use.
  • Third-Party Embed: A content type that allows you to embed third-party tools, such as forms or widgets, directly on the pages of your Springboard website.
  • Active: Turned on and working.
  • Inactive: Turned off and not working.
  • Header: The top part of a page.
  • Footer: The bottom part of a page.
  • Inline: Placed inside the page content itself.

When You Would Use This

Use this section if you need to:

  • Add CSS, HTML or JavaScript custom code to your site.
  • Choose whether code should run on one page or many pages.
  • Connect a service your organization already uses.
  • Turn a feature on or off without removing it completely.
  • Check that your code or connection still works after you save it.

Finding Custom Site Code

Use this task when you need to review code you have already added.

  1. In the left hand menu, click Integrations, then click Custom Site Code.

Screenshot: Custom Site Code list page

  1. Use the search box to find a custom site code item by name.

  2. Use the status filter to display only active or inactive items.

  3. Use the location filter to view Header, Footer or Inline code.

  4. Look at the Status and Modified columns to see what changed most recently.

  5. Use the Owner column to see if the code has been added by Firespring or by your team (Client).

Adding Custom Site Code

Use this task when you want to add new code to your website. Custom Code is restricted to Primary Administrators by default. If you are not a Primary Administrator, work with your team's Primary Administrator to update your Springboard permissions.

  1. In the left hand menu, click Integrations, then Custom Site Code.

  2. Click the green Add Custom Site Code button.

Screenshot: Add Custom Site Code button

  1. The Code owner will be set to Client and greyed out.

Firespring Owned Code

Only Firespring support level admins have access to change this setting. Firespring Support will classify the code as Firespring if it is code that will be managed by our team. If adding code on the client's behalf, they will classify it as Client. Any code classified as Client can be edited by the Springboard team members that have access to Custom Code.

  1. By default, Is this code active will be set to Yes, meaning the code will be active on any pages selected in the set up process. Toggle to No next to Is this code active to deactivate your new code if necessary.

  2. Enter a clear Name for the code. This name won't appear anywhere on your site, but will help you to keep your Springboard organized. You will also use this name for an inline code that you wish to add to a page using the Custom Code content type.

  3. Enter your Code. It is generally most efficient to copy the code directly from the source, and paste it into the Code box. Only CSS, HTML and JavaScript code are accepted. Other types of code will not work.

Be aware

Custom code can affect your site's functionality. Be sure to use caution when adding code. Always verify that your custom code comes from a valid source, is legitimate, and not harmful.

  1. If you are adding Header or Footer code, toggle to your preferred choice for Which pages should have this code:

  2. All of the site's pages: By default, this code will exist on All of the site's pages. Leave this setting if you want this code applied to all of your website's pages.

  3. Specific pages: To specify which pages this code should be active on, toggle to Specific pages. Click the page title(s) in the Available pages box, and use the right arrow (>) to move it to the Selected pages box.

  4. Where should this code be added on the selected pages:

  5. Header: This code will be placed in the \<head> of your site.

  6. Footer: This code will be placed before the \</body> tag.

  7. Inline: This code will be available for use by the Custom Code content type, which will place the code within the page's content.

  8. Click Save & Finish.

  9. Look for the Status column to display as Active upon saving.

    Screenshot: Custom Site Code add form

If you choose Inline code, you will need to follow the directions below to add the inline code to a page.

Adding Inline Code to a Page

You will use the Custom Code content type to add your Inline code directly to a page.

  1. Click My Website > Website Content.

  2. Navigate to the page to which you wish to add custom code, and click the title of the page to edit.

  3. In the left hand menu, locate the Custom Code content type, in the Standard section.

  4. Drag the custom code content type to your preferred location on the page, and drop it into place.

  5. Update the Content location if desired. This will default to the location in which the content type was placed.

  6. Update the Content position if desired. This will default to the position in which the content type was placed.

  7. Select your Custom code using the dropdown menu. Any code that you've added in the Custom Site Code area as Inline code will be listed in your dropdown menu.

Not seeing a code?

If you don't see a code listed that you believe should be available, navigate to the Custom Site Code area in Integrations, and update the code type to Inline.

  1. To add a new inline code directly from the page, select Create new custom code from the dropdown menu. Enter a Code name, and your Code. Any code entered on this page will populate in your Custom Site Code list in Integrations.

  2. Click Save & Close.

Editing Custom Site Code

Use this task when you need to change an item you already added.

  1. In the left hand menu, click Integrations, then Custom Site Code.

  2. Locate the code you want to change.

  3. Click the Title of the code you want to edit.

Screenshot: Custom Site Code item link in the list

  1. Update the code as necessary.

  2. Click Save & Finish.

If you are viewing an item that is owned by Firespring, you will need to reach out to Firespring Support for assistance.

Turning Custom Site Code On or Off

Use this task when you want to deactivate a code without deleting it.

  1. In the left hand menu, click Integrations, then Custom Site Code.

  2. Locate the code(s) you wish to activate or deactivate, and check the box to the left of the title.

  3. At the bottom of the page, click Activate Selected or Deactivate Selected.

Screenshot: Bulk activate and deactivate buttons

  1. Review the confirmation box.

  2. Click the green Yes, Activate Them or Yes, Deactivate Them button to finish the change.

If you only want to change one item, you can also click the title to open it and change its Active setting.

Deleting Custom Site Code

Use this task when you no longer need a code on your site. This is a task that cannot be undone, so make sure to use caution when choosing to delete code.

  1. In the left hand menu, click Integrations, then Custom Site Code.

  2. Click the title of the code you wish to delete.

  3. In the top right corner, click Delete.

Screenshot: Delete button on the custom site code edit page

  1. Read the warning box carefully. This action cannot be undone.

  2. Confirm that you want to delete the item by clicking Yes, Delete It.

Deleting an item removes it from the pages where it was being used. If you are not sure, deactivate it first instead of deleting it right away.

Managing Sitewide External Accounts

Use this task when you want to connect a third party account that applies across your whole website.

  1. In the left hand menu, click Integrations, then click External Accounts.

  2. Use the search box or status filter if you want to find an existing item quickly.

  3. Click the green Add External Account button.

Screenshot: Add External Account button

  1. By default, your new external account will be set to Active, meaning it will be active on every page of your site upon saving. Toggle to No if desired.

  2. Enter a simple Title for the account. This will not appear on your website, but will help you to keep your Springboard organized.

  3. Choose the Account type:

  4. The required information will change based on the account type chosen.

  5. Some account types ask for a code, while others ask for an ID or API key.

  6. Enter the required information. Each external account type will have a link to a help article to find the required information in your external account, as well as a sample code.

  7. Click Save & Finish, or use the arrow to click Save & Add Another.

Screenshot: External account add form

  1. Look for the item to show an Active status in the list upon saving.

Managing Page-Specific External Accounts

Use this task when you want an external account connection to work only on one page.

  1. Click My Website, then Website Content.

  2. Click the gear icon to the right of the page, then click Manage External Accounts.

  3. Click the green Add External Account button.

  4. By default, your new external account will be set to Active, meaning it will be active on every page of your site upon saving. Toggle to No if desired.

  5. Enter a simple Title for the account. This will not appear on your website, but will help you to keep your Springboard organized.

  6. Choose the Account type:

  7. The required information will change based on the account type chosen.

  8. Some account types ask for a code, while others ask for an ID or API key.

  9. Enter the required information. Each external account type will have a link to a help article to find the required information in your external account, as well as a sample code.

  10. Click Save & Finish, or use the arrow to click Save & Add Another.

You will see different options for page specific external accounts than sitewide external accounts. Some external accounts can only be added on a sitewide level.

Managing Third-Party Embeds

Third-Party Embed is a Content Type that allows you to add external tools directly to pages of your website. Some Third-Party Embed options will need to have an External Account set up as well, to connect your account with the Springboard.

  1. Click My Website, then Website Content.

  2. Navigate to the page upon which you'd like to embed code, or add a new page.

  3. Click the title of the page to edit.

  4. In the left hand menu, locate Third-Party Embed, in the Standard content section.

  5. Drag the content type to your desired location on the page, and drop it into place.

  6. Update the Content location if necessary. This will default to the location in which you placed the content type.

  7. Update the Content position if desired. This will default to the placement on the page in which it was placed.

  8. Enter a Title for your Third-Party Embed. This title will not display on your site, but will help you to stay organized in your Springboard.

  9. Select your preferred Embed type using the dropdown menu.

  10. Enter the required information. The required information will change based on the embed type chosen. Each embed type will have a link to a help article to find the required information in the third-party platform, as well as a sample code.

  11. Some Third-Party Embed options will also need an External Account setup to work on your website. Check to see if there is a red warning label in the Embed Type area that instructs you to set up an external account. Follow the link in the warning, and the directions above, to connect your External Account if necessary.

  12. Click Save & Close.

Managing Website Meta Tags

This is a Firespring Support or higher level task. If you would like Meta Tags added to your website, please organize your meta tag information and reach out to Firespring Support for assistance.

  1. In the left hand menu, click My Website, then Website settings.

  2. Click Meta Tags.

  3. Click Add Meta Tag.

Screenshot: Add Meta Tag button

  1. Choose your Display location:

  2. Header: This tag will be placed in the \<head> of your site.

  3. Do NOT display: Add the tag but keep it hidden from the site.

  4. Choose the tag Type:

  5. name is a basic tag type.

  6. http-equiv is used for browser-style instructions.

  7. property is often used for social or shared content information.

  8. Enter a clear Label.

  9. Enter your Content.

  10. Click Save & Finish, or use the arrow to click Save & Add Another.

Screenshot: Meta Tag add form

To edit a meta tag, open Meta Tags and click the tag name. To delete a meta tag, open the tag and click Delete. Meta Tags are a Firespring Support or higher level feature. Please reach out to Firespring Support for assistance.

Managing Webhooks

Use this task when you want Springboard to send updates to another system after something changes.

  1. In the left hand menu, click My Website, then Website Settings.

  2. Click Webhooks.

  3. Click Add Webhook.

Screenshot: Add Webhook button

  1. Enter a Title for the webhook.

  2. Choose the Events you want to have transmitted by the webhook. Click the item in the Available items box, then use the right arrow (>) to move your selection to the Selected items box.

  3. Enter the webhook URL.

  4. Click Save & Finish, or use the arrow to click Save & Add Another.

Screenshot: Webhook add form

After you save, the webhook list will display the Title, Events, URL, and Created date.

Reviewing or Editing a Webhook

Use this task when you want to review a webhook in more detail.

  1. In the left hand menu, click My Website, then Website Settings.

  2. Click Webhooks.

  3. Click the Webhook Title.

  4. Review the webhook logs.

  5. Click Edit Webhook if you need to make changes, or view the Webhook's details.

  6. When you've completed your edits, click Save & Finish.

Screenshot: Webhook details page with Edit Webhook button

Checking Webhook Logs

Use this task when you want to see whether a webhook was sent successfully.

  1. In the left hand menu, click My Website, then Website Settings.

  2. Click Webhooks.

  3. Click the Webhook Title.

  4. Review the list of webhook log entries.

  5. Use the filters to narrow the list by Date, Event, or Status. Or use the Search bar to look for a specific log.

  6. Check the box to the left of one or more log entries if you want to resend the log data.

  7. Click Resend Selected.

Screenshot: Webhook log list with filters and resend button

If a webhook fails, the log helps you see when it happened and which event was sent.

Tips & Helpful Guidance

  • If you are unable to edit a Custom Code, it is most likely a Firespring owned code, which can only be edited by the Firespring team.
  • If you choose Specific pages, make sure the right pages are selected before you save.
  • If you choose Inline code, you will need to follow the directions to add the code to a page before it will truly be active on your site.
  • If you are unsure about adding Custom Code to your site, first check to see if the code you want to add is an External Account, or Third-Party Embed option.
  • If you are adding code to many pages, double check your settings before saving.
  • If you are turning something on for the first time, test it right away after saving.

Troubleshooting

Problem: You cannot find the Custom Site Code page

Solution:

  • Check that you are in the Integrations menu.
  • Look for Custom Site Code in the list.
  • If you still do not see it, ask your site admin or support team to check your access.
  • If you are a Primary Administrator and are not able to access Custom Site Code, reach out to the Firespring Support team to chat about upgrading your level of service.

Problem: Your code does not appear on the page

Solution:

  • Confirm that the item is set to Active.
  • Confirm the pages selected during set up were correct.
  • Confirm the type of code added has a visual element. Some codes work in the page's source code, but do not appear on the frontend of the site.
  • Check that the code was added to the right place: Header, Footer, or Inline.
  • If your code was added as Inline code, confirm that you have also followed the steps to add the Custom Code content type to the page.

Problem: You cannot edit an item

Solution:

  • Some codes may be owned by Firespring, meaning they were added by the Firespring team on your behalf. Only Firespring Support can make changes to these codes.
  • Reach out to Firespring Support for help if you need to change one of the Firespring owned codes on your site.

Problem: An external account is not working after you save it

Solution:

  • Check that the account shows Active.
  • Review the account type, and make sure you entered the correct information.
  • Because of the nature of some external accounts, you might not see a visual element on the page. Login to your external account to see if the connection is delivering results.
  • If needed, turn the account off, then back on after you fix the settings.

Problem: A Third-Party Embed is not displaying on the page

Solution:

  • Check that the third-party embed is set to Active.
  • Review the embed type, and confirm sure you entered the correct information.
  • Check to see if an External Account connection is required to activate your Third-Party Embed. This will be listed as a red warning box in the Embed type area of your Third-Party Embed content type.

Summary

Adding custom features allows you to use tools that originate outside of your Springboard with your website. Use Custom Site Code for page code, and use External Accounts when you connect other services. Use Third-Party Embed to embed third-party tools directly on the pages of your website. Save your changes, check the status, and test the result so you know everything is working.