Solved

How do I add an embedded signup form in a blog?


Badge

I’m wanting to place in an embedded form into at least one blog page. I can only add custom HTML code into it. 

How do we do this?

 

 

icon

Best answer by caroline 10 March 2021, 20:41

View original

17 replies

Userlevel 5
Badge +4

Hi @Trish,

I took another look at your site and it looks like you have multiple Klaviyo JS snippets with various company IDs.

I would show the following to your dev resource or Shogun support (this is taken directly from the source code of your website, with the company IDs redacted since this post is public). The “REDACTED” pieces were originally several different company IDs. You should only have one snippet on your site with your own company ID.

    var urls = ["\/\/static.zotabox.com\/6\/d\/6d0df4988ca2b22715e03e769657b4e4\/widgets.js?shop=rollers-direct.myshopify.com","https:\/\/static.klaviyo.com\/onsite\/js\/klaviyo.js?company_id=REDACTED\u0026shop=rollers-direct.myshopify.com","https:\/\/contactform.hulkapps.com\/skeletopapp.js?shop=rollers-direct.myshopify.com","https:\/\/shopifyapp.rontar.com\/ScriptTags\/onlinestore.js?advId=24442\u0026audienceId=9f006ed6-283f-4d79-bc0c-9df193c6d79b\u0026priceId=5570\u0026shop=rollers-direct.myshopify.com","https:\/\/vital-forms.c1.humanpresence.app\/ellipsis-vital-forms.js?shop=rollers-direct.myshopify.com","https:\/\/script.metricode.com\/ellipsis.js?api_key=9e935ab5-d4f2-4829-90e7-a2ef82ba4216\u0026shop=rollers-direct.myshopify.com","\/\/code.tidio.co\/w9cbslwoyehxenn7ebhmjuvq9kadnmra.js?shop=rollers-direct.myshopify.com","https:\/\/shopify.covet.pics\/covet-pics-widget-inject.js?shop=rollers-direct.myshopify.com","https:\/\/static.klaviyo.com\/onsite\/js\/klaviyo.js?company_id=REDACTED\u0026shop=rollers-direct.myshopify.com","https:\/\/trust.conversionbear.com\/script?app=trust_badge\u0026shop=rollers-direct.myshopify.com","https:\/\/hektorcommerce.com\/apps\/trustseals\/files\/js\/dist\/trustseals.min.js?shop=rollers-direct.myshopify.com","https:\/\/static.klaviyo.com\/onsite\/js\/klaviyo.js?company_id=REDACTED\u0026shop=rollers-direct.myshopify.com","https:\/\/cdn.cartsguru.io\/b81303b8-afd1-4376-9e7f-3ab7181b1487\/c.js?shop=rollers-direct.myshopify.com","https:\/\/wheelioapp.azureedge.net\/app\/index.min.js?version=20210310144019685\u0026shop=rollers-direct.myshopify.com","https:\/\/cdncozygallerya.addons.business\/embed\/cziframeagent.js?v=2804141505\u0026shop=rollers-direct.myshopify.com","https:\/\/www.parcelpanel.com\/assets\/admin\/custom\/js\/checkout.js?shop=rollers-direct.myshopify.com","https:\/\/acp-magento.appspot.com\/js\/acp-magento.js?v=2\u0026mode=shopify\u0026UUID=75667ccc-f993-4cd3-904a-c3892fadde8b\u0026store=22174609\u0026shop=rollers-direct.myshopify.com","https:\/\/analytics.getshogun.com\/collector.js?shop=rollers-direct.myshopify.com"];
 

Best,

Caroline

Userlevel 5
Badge +3

@Trish 

Just create embeded form in klaviyo and there you will be given HTML code to use on your website..

just click on behaviors and the first thing you will see in embeded form will be the HTML code

 

Badge

I have tried this - it doesn’t show up. I don’t think this is HTML - it is CSS and you cannot just paste it into an HTML Field?

Userlevel 5
Badge +3

@Trish 

For this form to show on your website it must be published/live in klaviyo. Make sure you publish it in klaviyo before you can see it on your website. If it is in drafts it wont show for sure..

Badge

Thanks it is a live publish embed form. :shrug:

Badge

Would it be possible for someone to look at it for me? I can grant someone from Klaviyo collab access if needed. I’d really like to get this working/live

Badge

@caroline 

Can you assist? :)

Badge

Still need help please!  Had someone else look at my installation:

I was able to take a look at the page and from what I can see, the code you are using to add the form is appearing on the page correctly, but it does not seem to be pulling any information to display the form. I also tested the code you added outside of Shogun and even then I was not able to have any form appear for me. 

Userlevel 6
Badge +5

Hi Trish - thanks for sharing this in the Community. While the Community is a great place to get feedback from other customers and awesome Partners (like @Bobi N.! ) who have had similar experiences, the forum isn’t monitored by any Klaviyo Support team members, so they won’t be able to triage your question by going into the backend of your account. 

Like Bobi mentioned above, you would need to use the snippet and include that into the theme.liquid file of your website. I would recommend taking a look at this article, which has a lot of details on where to add the code to your Shopify site. 

Specifically, the steps would be to go to the form you have created that you want to embed, hit the Behaviors tab, copy that code snippet. Once you have copied that code snippet, you’ll want to follow the rest of the steps outlined here. I’ll paste the steps here for easier access: 
 

First, navigate to your Shopify admin and go to Online Store > Themes. Then, click Actions > Edit code.

Open your footer.liquid theme file. Let's say you would like to have your signup form display above your site's copyright information. Search for the term "copyright" in the file.

Next, on a line above the opening <div> for the copyright code, paste the form embed code.

mceclip5.png

Click Save, and the form will appear in the footer of your site.

The example above is to add the embed form to your footer, below the Copyright content. Since you are trying to add this to your blog, I would recommend adding your code snippet to the article or blog liquid. There’s a Shopify article with additional details on this

You can check to see if you have done all these steps accurately by going to the website for where you want this form to appear, right click > Inspect > Command F to search the code > paste into the search box the code snippet you copied from your Behaviors tab in Klaviyo. 

If you’ve followed these steps and still are having trouble getting the form to appear, please provide a screenshot of the code (but make sure not to share any personal information in the screen shot, including API Keys or form keys!). 

Additionally, it may be useful to connect with an agency in our Partner Directory if you are not as familiar with code, as this can sometimes get a little tricky. Klaviyo does not handle the coding aspect of Shopify templates, so it’s my recommendation to explore bringing on an expert for this type of work. You can check out some fantastic partners of ours in this Partner Directory. 

Thanks so much, 
-Cass. 

Userlevel 6
Badge +5

@Trish 
Just wanted to reply back to let you know that I missed the section in that help center article that outlines the steps to add an embed form that’s NOT a footer! You can view that specific section here, but I’ll paste the steps below for easier access:
 

If you would like to include an embedded form on your Shopify site anywhere besides the footer, you can do so using a Custom HTML block. 

First, navigate to your Shopify admin and go to Online Store > Themes. Then, click Customize > Add Section. Here, you will either see the option to add a Custom content or a Custom HTML block. If you see Custom content instead of Custom HTML, add this block and delete the default content that populates. Next, click  Add content > Custom HTML 

Here, you can paste in your embed code.

embed_install.gif

Badge

@Trish 
Just wanted to reply back to let you know that I missed the section in that help center article that outlines the steps to add an embed form that’s NOT a footer! You can view that specific section here, but I’ll paste the steps below for easier access:
 

If you would like to include an embedded form on your Shopify site anywhere besides the footer, you can do so using a Custom HTML block. 

First, navigate to your Shopify admin and go to Online Store > Themes. Then, click Customize > Add Section. Here, you will either see the option to add a Custom content or a Custom HTML block. If you see Custom content instead of Custom HTML, add this block and delete the default content that populates. Next, click  Add content > Custom HTML 

Here, you can paste in your embed code.

 

You are correct - I’m not trying to add to a footer. 

This additional info, that I’ve also seen before, looks like adding it to a homepage section which is not a place I”m looking to put it.   I’m trying to place it at the bottom of this page 

https://rollersdirect.com/blogs/coyote-roller-news/do-coyotes-jump-over-fences-to-attack-dogs

Badge

Forgot - wanted to add that the instruction say
“If you would like to include an embedded form on your Shopify site anywhere besides the footer, you can do so using a Custom HTML block. “

 

I have added it to an HTML block located within Shogun which is the page format software I’m using to create pages/blogs for my site.  That is who I had look at how I had done it, to see if there was any issue with how I tried to insert it into Shogun.   I did it correctly from their side. 

Userlevel 6
Badge +5

Hi @Trish 

I’m not as familiar with Shogun as a templating dev tool, so I apologize if you have already looked at this article that is published by Shogun on how to specifically embed HTML code in Shogun via Klaviyo (it’s likely that you have). I also went to your blog page that you mentioned above and combed through every single <div> box using the inspect tool and did not see your Embed Code for your Form (found under the Behaviors tab) in any of the boxes. 
My recommendation here is to ask the Shogun staff member you are working with to screenshot the exact area where this embed code is being applied, because there isn’t anything else we can assist on from our end as this is code/developer based work. I’m trying to locate where the embed code is, which is how your signup form would display, and I’m just not seeing that code where you’ve indicated it should be. 

Thanks so much and hope we can solve this soon, 
-Cass. 

Badge

Really appreciate your continued help.

 

Here are 2 screen shots that show you the code placed into the tool (1) as well as the location the code is (not visible but there is a box around its placeholder) (2)

 

Badge

I’ve written to Shogun again as well for more help - maybe I’ll get a different person this time

Userlevel 5
Badge +4

Hi @Trish,

 

It sounds like the code isn’t actually being published on your site, since Cassy was not able to locate it. I would recommend asking Shogun support to show you the snippet in the source code of your site (you can do so with Chrome dev tools) after it’s been published.

 

Best,

 

Caroline

Badge

Okay, not sure what that means but will send to Shogun. Could be that I had several sign up forms capable of showing up on a given page. (footer, flyout and embed)

Reply