Square Appointments HTML button eliminates content and footer

[NicMunoz]

I'm trying to put a Square Appointments link into a website I'm developing.  The embed HTML code that Square Appointments is giving to me is:

<!-- Start Square Appointments Embed code --> <a target="_top" style=" background-color: #31859c; color: white; height: 40px; text-transform: uppercase; font-family: 'Square Market', 'helvetica neue', helvetica, arial, sans-serif; letter-spacing: 1px; line-height: 38px; padding: 0 28px; border-radius: 3px; font-weight: 500; font-size: 14px; cursor: pointer; display: inline-block; " href="https://square.site/book/DF9920GCYV8Q8/mr-b-s-college-crunch-mgmt-lodi-ca" rel="nofollow">Book an Appointment</a> <!-- End Square Appointments Embed code —>

In the Weebly Editor, the Form and the Footer are showing.  In the Preview the Form and the Footer are gone.  I've moved the code below the form and the form remains but the footer is still gone.  I don't like this solution.

Can anybody tell me how to change the code for the button so it doesn't do this?

See samples below:  Picture 1 Builder, Picture 2 Preview

[NJRFTF]

@NicMunoz 

Suggest that you reach out here -Square Online Store Discussion Board.

[NicMunoz · Accepted solution]

Solved it myself actually.  Took the weblink from the code supplied by Square Appointments and just added it to a Weebly button.

<!-- Start Square Appointments Embed code --> <a target="_top" style=" background-color: #31859c; color: white; height: 40px; text-transform: uppercase; font-family: 'Square Market', 'helvetica neue', helvetica, arial, sans-serif; letter-spacing: 1px; line-height: 38px; padding: 0 28px; border-radius: 3px; font-weight: 500; font-size: 14px; cursor: pointer; display: inline-block; " href="https://square.site/book/DF9920GCYV8Q8/mr-b-s-college-crunch-mgmt-lodi-ca" rel="nofollow">Book an Appointment</a> <!-- End Square Appointments Embed code —>