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

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. :)

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.

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. :)

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?

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

Kindly let us know. :)

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

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. :)