Embed a CTA into our website

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 must be a member of the Account Administrator, Content Manager, or Demand Generation user 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, then click on either Link Calls-To-Action or Form Calls-To-Action (depending on the type of CTA you want to embed).
  3. Your existing CTAs will appear on the right. Click on the CTA you want to embed to open it in the CTA Editor.
  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.
1 out of 1 found this helpful

Comments

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

    0
    Comment actions Permalink
  • 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!

    1
    Comment actions Permalink
  • Is there a way to embed the CTA without the hub header and footer? I'd like to just embed the CTA by itself?

    0
    Comment actions Permalink
  • Hi Debra, the embedded CTA isn't supposed to display your Hub's header and footer, and the reason it does is likely related to your Hub's custom code. Our Support team should be able to easily fix this for you; to get that process started, please simply open a support ticket!

    0
    Comment actions Permalink
  • Thank you.

    0
    Comment actions Permalink

Please sign in to leave a comment.