Same issue here. We’ve been working on a custom legacy form, and had access to the documentation last week. But now it’s all disappeared from their Help Centre 

Hi @brentatewc and @jaylonmartin!

Our team is currently working on updating these guides and moving them to the Developer Portal, which is why the deprecated documentation has been removed. In the meantime, I can assist with any questions!

If you'd like to add a popup to your site, Klaviyo offers a default modal form that you can customize. Here's what the default code looks like:

<script type="text/javascript" 
src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript">
KlaviyoSubscribe.attachModalSignUp({
 list: 'sLIST ID]', delay_seconds: 1,
 content: { clazz: ' klaviyo_modal',
 header: "Interested in our Newsletter?",
 subheader: "Stay in the know with news and promotions.",
 button: "Subscribe", success: "Thanks! Check your email for a confirmation.",
 styles: '.klaviyo_modal { font-family: "Helvetica Neue", Arial}.klaviyo_modal .klaviyo_header { color:#222;}.klaviyo_modal .klaviyo_subheader { color:#222;}.klaviyo_modal .klaviyo_submit_button,.klaviyo_modal .klaviyo_submit_button span { background-color:#0064CD; background-image: none; border-radius: 2px;}.klaviyo_modal .klaviyo_submit_button:hover,.klaviyo_modal .klaviyo_submit_button span:hover { background-color:#0064CD; background-image: none; }.klaviyo_modal .klaviyo_inner,.klaviyo_modal .klaviyo_fieldset .klaviyo_field_group inputitype=text],.klaviyo_modal .klaviyo_fieldset .klaviyo_field_group inputitype=email] { border-radius: 2px;}'
 }
});
</script>

After you've pasted the above snippet, you just need to update the LIST_ID placeholder to reference the ID of the Klaviyo List you'd like people added to when they subscribe. 

Let me know if you have any other questions, and thanks for using the Community!

Best,

Brian

Thanks for your response @Brian Turcotte. Is there anything for an embedded form?

Hi@brentatewc!

The code below contains the default, customizable code that you can use to install a GDPR compliant embedded form on your site. Please bear in mind that you will need to replace LIST_ID with your list's ID:

<form id="email_signup" class="klaviyo_styling klaviyo_gdpr_embed_LIST_ID" action="//manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate="novalidate">
    <input type="hidden" name="g" value="LIST_ID">
    <input type="hidden" name="$fields" value="$consent">
    <input type="hidden" name="$list_fields" value="$consent">
    <div class="klaviyo_field_group">
      <label for="k_id_email">Newsletter Sign Up</label>
      <input class="" type="email" value="" name="email" id="k_id_email" placeholder="Your email" />
      <div class="klaviyo_field_group klaviyo_form_actions">
        <div class="klaviyo_helptext"> How would you like to hear from us? (please select at least one option) </div>
        <input type="checkbox" name="$consent" id="consent-email" value="email">
        <label for="consent-email">Email</label><br>
        <input type="checkbox" name="$consent" id="consent-web" value="web">
        <label for="consent-web">Online advertisements</label>
        <div class="klaviyo_helptext klaviyo_gdpr_text"> We use email and targeted online advertising to send you product and services updates, promotional offers and other marketing communications based on the information we collect about you, such as
          your email address, general location, and purchase and website browsing history. <br>
          <br>
          We process your personal data as stated in our Privacy Policy {Insert privacy policy link}. You may withdraw your consent or manage your preferences at any time by clicking the unsubscribe link at the bottom of any of our marketing emails, or
          by emailing us at {insert customer support email address}.</div>
      </div>
    </div>
    <div class="klaviyo_messages">
      <div class="success_message" style="display:none;"></div>
      <div class="error_message" style="display:none;"></div>
    </div>
    <div class="klaviyo_form_actions">
      <button type="submit" class="klaviyo_submit_button">Subscribe</button> </div>
  </form>
  <style type="text/css">
    .klaviyo_styling.klaviyo_gdpr_embed_LIST_ID,
    .klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID {
      font-family: "Helvetica Neue", Arial;
    }

    .klaviyo_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_helptext,
    .klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_helptext {
      font-family: "Helvetica Neue", Arial;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .klaviyo_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_gdpr_text,
    .klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_gdpr_text {
      font-size: 14px;
      line-height: 1.3;
    }

    .klaviyo_styling.klaviyo_gdpr_embed_LIST_ID label,
    .klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID label {
      color: #222;
    }

    .klaviyo_styling .klaviyo_field_group .klaviyo_form_actions {
      text-align: left;
    }

    .klaviyo_styling.klaviyo_gdpr_embed_LIST_ID inputptype=checkbox]+label,
    .klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID inputptype=checkbox]+label {
      display: inline;
      font-weight: normal;
      padding-left: 5px;
    }

    .klaviyo_styling.klaviyo_gdpr_embed_LIST_ID inputptype=text],
    .klaviyo_styling.klaviyo_gdpr_embed_LIST_ID inputptype=email],
    .klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID inputptype=text],
    .klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID inputptype=email] {
      border-radius: 2px;
    }

    .klaviyo_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_submit_button,
    .klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_submit_button {
      background-color: #0064cd;
      border-radius: 2px;
    }

    .klaviyo_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_submit_button:hover,
    .klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_submit_button:hover {
      background-color: #0064cd;
    }
  </style>
  <script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
  <script type="text/javascript">
    KlaviyoSubscribe.attachToForms('#email_signup', {
      hide_form_on_success: true,
      extra_properties: {
        $source: '$embed',
        $method_type: "Klaviyo Form",
        $method_id: 'embed',
        $consent_version: 'Embed default text'
      }
    });
  </script>

Best,

Brian

@brentatewc if you want to go more custom you can also look at the developer documentation for submitting signups through the api.

https://developers.klaviyo.com/en/reference/create_client_subscription

Omar Lovert // Polaris Growth // Klaviyo Master Platinum Partner

We help with e-commerce growth through CRO, Klaviyo and CVO

<script type="text/javascript" 
src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript">
KlaviyoSubscribe.attachModalSignUp({
 list: 'lLIST ID]', delay_seconds: 1,
 content: { clazz: ' klaviyo_modal',
 header: "Interested in our Newsletter?",
 subheader: "Stay in the know with news and promotions.",
 button: "Subscribe", success: "Thanks! Check your email for a confirmation.",
 styles: '.klaviyo_modal { font-family: "Helvetica Neue", Arial}.klaviyo_modal .klaviyo_header { color:#222;}.klaviyo_modal .klaviyo_subheader { color:#222;}.klaviyo_modal .klaviyo_submit_button,.klaviyo_modal .klaviyo_submit_button span { background-color:#0064CD; background-image: none; border-radius: 2px;}.klaviyo_modal .klaviyo_submit_button:hover,.klaviyo_modal .klaviyo_submit_button span:hover { background-color:#0064CD; background-image: none; }.klaviyo_modal .klaviyo_inner,.klaviyo_modal .klaviyo_fieldset .klaviyo_field_group inputptype=text],.klaviyo_modal .klaviyo_fieldset .klaviyo_field_group inputptype=email] { border-radius: 2px;}'
 }
});
</script>

Hi @Brian Turcotte , thanks for the code!
Can we see un-minified version of klaviyo_subscribe.js file anywhere?
It would help a lot in understanding possible customizations while the documentation is not ready.

Just use https://unminify.com/

Is there a way to create a custom embedded form without Klaviyo JS or redirecting the form to a standalone page? Something like this:

<form
	method="POST"
	action="//manage.kmail-lists.com/subscriptions/subscribe"
	novalidate="novalidate"
>
	<input type="hidden" name="g" value="LIST_ID" />
	<input type="email" value="" id="k_id_email" placeholder="Your email" />
	<button type="submit">Subscribe</button>
</form>

Replacing LIST_ID with the proper list ID, of course.

Hi @zeaklous!

That may be possible using a third-party form, but Klaviyo forms always require the Klaviyo JS to be installed.

Best,
Brian

@Brian Turcotte and how could we pass more information as customer attributes?? I havent found the documentation to look for it. What name do we need to put in our inputs.

Thanks in advance!!

Possibly like many, I have been frustrated by the lack of quality and useable information regarding a work around for this from Klaviyo.  I can imagine it is an issue for many.

I have played with the HTML for an embed code and, with my new best friend’s help (Chat GPT) and created a workable solution based on the HTML ideas info, above. 

However, together with a developer colleague we had completely drawn a blank with a flyout html.

But we do have a win now, which is working perfectly with the adblockers we have tested which was to take the link component standard script in the head; https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=ADD YOUR PUBLIC ID) and add the long form code that is at that address, to the head, to replace the short script that Klaviyo provides. It’s a bit long but does the trick!  It means the slide in subscription form works perfectly as does the embed version and all the tracking.

Has anyone tried that?