[Support request] I need to add API code to a page, how can I achieve this?

Home Forums Support [Support request] I need to add API code to a page, how can I achieve this?

Home Forums Support I need to add API code to a page, how can I achieve this?

  • This topic has 7 replies, 2 voices, and was last updated 3 months ago by Fernando.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2208427
    Vince

    I need to add API codes to 2 pages. I have never created custom post types or templates as this is my first generate press site. How can I add the API code to the 2 pages that I need to add it to? What steps do I need to take to ensure that the code displays properly and everything is set up properly? Thanks in advance.

    #2208441
    Fernando
    Customer Support

    Hi Vince,

    The easiest way to add a Code to a specific page is through a Hook Element.

    Reference: https://docs.generatepress.com/article/hooks-element-overview/

    You may set in which pages should the code be added through the Display Rules.

    Hope this clarifies. 🙂

    #2210881
    Vince

    That helps! I was able to add it to my page but I am having a hard time styling it. How can I make this form 80% wide and center aligned? I have never styled javascript before.

    #2210891
    Fernando
    Customer Support

    Is this from a plugin, specifically, Hubspot? I believe their forms have a shortcode. If so, you may place this shortcode in a Shortcode Block within a Container Block, if you’re using GenerateBlocks. Then, set a width there.

    Moreover, as this form is from a third party, it would be best to reach out to them with regards to styling it.

    If you would like to force its styling through code, you can try adding this CSS in Appearance > Customize > Additional CSS:

    div#hbspt-form-1651797468814-3780032579  .hs-form-7da4d04d-2a75-40b3-93a6-4af5874c84e6_686b6f38-81bd-4784-bcad-77d70438e37a.hs-form {
        width: 80%;
        display:flex;
        flex-direction:column;
    }
    
    div#hbspt-form-1651797468814-3780032579 {
        text-align:center;
        display:flex;
        justify-content:center;
    }
    
    .hs_recaptcha.hs-recaptcha.field.hs-form-field {
        align-self:center;
    }
    
    .hs_submit.hs-submit {
        align-self:center;
    }

    However, as mentioned, it would be best to reach out to the support of this form.

    Hope this clarifies. 🙂

    #2210895
    Vince

    Gotcha ok, now the other api thing I need to add is on this page next to the block of text that is there on the left. How can I add a hook and direct it to show up there to the right of that block of text in its own container?

    #2210896
    Fernando
    Customer Support

    To clarify, doesn’t this have a shortcode alternative? Most plugins offer as such.

    Kindly let us know. 🙂

    #2210898
    Vince

    From what I know, it doesn’t have one. Is there a way to do it with the hooks and direct it there?

    #2210900
    Fernando
    Customer Support

    Thank you for clarifying.

    To answer your question, yes, there is. You can create a portable Hook Shortcode which you can place anywhere manually, and hook on to in your Elements.

    Here is a step-by-step way on how to do it: https://generatepress.com/forums/topic/ads-show/#post-2161670

    Basically, with the portable Hook Shortcode, you may create a Grid Block then, add the portable Hook Shortcode to the right.

    Hope this clarifies. 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.