Embed a CTA into a Website (or Anywhere)

Follow

Your CTAs don't have to live just in your Hub: by embedding them, you can put them anywhere you like, such as on your website. Here's how.


 

Before You Begin

  • To work with CTAs, you need to be a member of the Account Admin, Content Manager, or Demand Generation Groups.
  • You can embed both Link CTAs and Form CTAs, as well as CTAs that are hidden. Note that hiding a CTA will not affect embedded CTAs.
  • Embedded CTAs are displayed within an iframe, so they remain fully functional within their non-Hub context, just as they would when displayed on your Hub.

 

Embed a CTA

You can generate an embed code for any CTA, allowing you to easily display that CTA within your non-Hub web properties.

  1. Log in to Uberflip. Click on Hubs and select the Hub that contains the CTA you want to embed.
  2. In the sidebar menu on the left, click on Calls-to-Action.
  3. Your existing CTAs will appear on the right. Hover your mouse over the CTA you want to copy and click on the Edit button.
  4. The CTA Editor will appear. In the top right corner, click on the Embed button:

    Hubs___Call-to-Action_Configuration_-_Uberflip.png

  5. The embed code will appear in an overlay:

    Hubs___Call-to-Action_Configuration_-_Uberflip.png
  6. To use it, simply copy the embed code and paste it into the HTML wherever you want the CTA to appear.
0 out of 0 found this helpful

Comments

2 comments
  • For the scroll ="none" part of the code. What would need to be updated to make the CTA embed scroll?

  • Hi Jessica, thanks for your question! I've asked our developers about this, and it looks like the scroll="none" part of the code snippet is actually not supported in HTML5 anymore. As a result, it no longer does anything: you could remove it from the code snippet and this would have no effect.

    Don't worry though, CTAs should still scroll the way they're supposed to:

    - Link CTAs are always "one page" and never scroll;

    - Form CTAs don't scroll initially, but automatically become scrollable when a visitor interacts with them (i.e. when the CTA enters the "Focus" state in which all of the form fields are visible).

    So in other words, you shouldn't need to change the embed code in any way for your embedded CTAs to be displayed correctly. Hope that answers your question!

Please sign in to leave a comment.