Dynamic text over image


We used our query-string DKI shortcode to display the value of the parameter “?your-name” and placed it on top of an image.

The same method can be used to place different types of dynamic content created using If-So, like Triggers, or content created using the CSV bulks extension.


Hey {name}!

This message is dynamic!

Fill in your name to see how we display it above the image

The code we used to create this example

<div class="ifso-pt-40">
  <img class="ifso-pt-40-image" alt="image"
  <div class="ifso-pt-40-content">
    <p class="ifso-pt-40-title">
      Hey [ifsoDKI type="querystring" parameter="your-name" fallback="{name}"]!
    <p class="ifso-pt-40-text">
      This message is dynamic!

    var addEvent = function (el, type, fn) {
      if (el.addEventListener)
        el.addEventListener(type, fn, false);
        el.attachEvent('on'+type, fn);

    var extend = function(obj,ext){
      for(var key in ext)
          obj[key] = ext[key];
      return obj;

    window.ifsoFitText = function (el, kompressor, options) {
      var settings = extend({
        'minFontSize' : -1/0,
        'maxFontSize' : 1/0

      var fit = function (el) {
        var compressor = kompressor || 1;
        var resizer = function () {
          el.style.fontSize = Math.max(Math.min(el.clientWidth / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)) + 'px';
        addEvent(window, 'resize', resizer);
        addEvent(window, 'orientationchange', resizer);
        setTimeout(()=> { resizer() }, 1)

      if (el.length)
        for(var i=0; i<el.length; i++)

      return el;

  ifsoFitText(document.querySelector('.ifso-pt-40-title'), 1.5);
  ifsoFitText(document.querySelector('.ifso-pt-40-text'), 2);

<style class="ifso-pt-style">
  .ifso-pt-40 {
    position: relative;
    width: 100%

  .ifso-pt-40-image {
    width: 100%;
    /* makes sure image is not opened on click */
    pointer-events: none; 

  .ifso-pt-40-content {
    position: absolute;
    top: 47.7%;
    left: 21.6%;
    width: 58.6%;
    height: 40.3%;

    padding: 2%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    font-family: sans-serif;
    text-align: center;

  .ifso-pt-40-title {
    margin: 5% 0 10%;
    line-height: 1.15;
    color: #fb0287;
    text-transform: capitalize;

  .ifso-pt-40-text {
    margin: 0;
    line-height: 1.15;
    color: #1e0547;
brush-icon EDIT TEMPLATE


DKI, Inline Content

Edit Template

COPY CODE reset-button
Related Assets
Countdown (timer)
🕐 Our next webinar

25.10 | 17:00 UTC

according to your time zone (Unknown)

Event Invitation