URL Parameter Dynamic Text Replacement WITHIN HTML elements?

  • 31 July 2019
  • 5 replies
  • 286 views
S

Desperately trying to figure out how to dynamically insert text within an HTML box based on URL parameters. This is a feature Instapage offers and is the only reason I still use instapage and am not 100% Unbounce. Tried explaining my use case below, does anyone have ideas for a workaround? Instapage makes it seem so easy but I haven’t found anything that works using java/html in this forum or others 😦

Use Case

I use Typeform.com forms for lead capture almost exclusively, except for simple name/email/message forms.
Typeform’s are embedded into Unbounce using the HTML element. Typeform has hidden fields which allows you to pass form data in the submit URL. Instpage’s dynamic text replacement allows you to replace text anywhere on the site, including within HTML boxes, by inserting your URL parameter within brackets, for example: [anykeyword]

For example, if page URL = www.mysite.com/page1?param1=example

And, within Instapage editor you use an HTML box to embed a Typeform using their javascript/html =

iframe id=“typeform-full” width=“100%” height=“100%” frameborder=“0” src=“https://account.typeform.com/to/z3tHHB**?param1=[param1]**”></iframe

Then the LIVE page’s html will insert param1 into Typeform’s HTML code, therefore providing the hidden field using the page’s URL parameters. This is the end result =

iframe id=“typeform-full” width=“100%” height=“100%” frameborder=“0” src=“https://account.typeform.com/to/z3tHHB**?param1=example**”></iframe

Here is a live URL example. https://www.arizonahomeapprovals.com/gilbert-neighborhoods?neighborhood=Breckenridge

The URL parameter value for “neighborhood” can be replaced to anything and dynamically change the site’s HTML (viewsource and search “typeform” to get to the Typeform html).

I hope someone will understand what I’m trying to communicate, and I appreciate your help very much. Please let me know if you have any questions, thank you! - Rick

5 replies

S

I figured out a solution in case anyone ever needs to insert dynamic text into an HTML element:

Using the example I provided above:
iframe id=“typeform-full” width=“100%” height=“100%” frameborder=“0” src=“https://account.typeform.com/to/z3tHHB**?param1=example**”></iframe

Here is the solution (in bold). Simply insert the ub:dynamic script where you want the custom parameter to go:

src=“https://account.typeform.com/to/z3tHHB?param1=<ub:dynamic parameter=“param1” title=“URL Parameter: param1”>example</ub:dynamic>”>

*Note - the italicized text example is basically “back up” text that is inserted if no URL parameters are present.

victoire

Hi,
I found an effective solution on https://gist.github.com/lippytak/f61589d4a21a135a026d
You just need to replace the two typeform url 😉

<!--Upload this file to your server-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <!--Add the title of your typeform below-->
  <title>CalFresh</title>

  <!--CSS styles that ensure your typeform takes up all the available screen space (DO NOT EDIT!)-->
<style type="text/css">
    html{
      margin: 0;
      height: 100%;
      overflow: hidden;
    }
    iframe{
      position: absolute;
      left:0;
      right:0;
      bottom:0;
      top:0;
      border:0;
    }
  </style>
</head>
<body>

<script>

// Get source from URI
var source = window.location.toString().split('?')[1]
if (/mobile|tablet/i.test(navigator.userAgent.toLowerCase())) {
  // Redirect to source: 
  window.location.href = "https://getcalfresh.typeform.com/to/SOeXfq?" + source + "&embed=full";
} else {
  // Inject iframe into body
  //body = document.getElementsByTagName("body");
  var frame = "<iframe id=\"typeform-full\" width=\"100%\" height=\"100%\" frameborder=\"0\" src=\"https://getcalfresh.typeform.com/to/SOeXfq?" + source + "&amp;embed=full\"></iframe>";
  document.body.innerHTML = frame;
}
</script>

</body>
</html>
D

Hey Rick @serviceleadsllc !

I inserted <ub:dynamic parameter=“param1” title=“URL Parameter: param1”> example </ub:dynamic> into my link URL but it was just replaced with “example”, when I open the site with parameter ?param1=test.

Could you tell me where you found information about the ub: script specifications?

Thanks, Dominik

E

Hello, I have the same problem. @Dominik2, did you find a solution ?

AbodyRulez

The problem is the quotation. Use this version:
<ub:dynamic parameter='param1' title='URL Parameter:param1'>default value</ub:dynamic>

Reply


Terms & ConditionsCookie settings