.png)
List of Sparkhub Dynamic Fields and Code Blocks
Sparkhub's ability to control content on your Landing Pages requires the Pages to contain header code and other code blocks or Sparkhub Dynamic Fields. Furthermore, Sparkhub can control content in text messages when you use Sparkhub Dynamic Fields. This article lists all available code blocks and SDFs, and how to use them.
Sparkhub Dynamic Fields (SDFs)
Sparkhub Dynamic Fields (SDFs), which are strings of characters that can turn into specific text or links. SDFs are enclosed in a single set of curly brackets with the prefix "sh" - for instance, {shEventID} or {shHostFirst} - and are case-sensitive. They can be used in certain cases inside Sparkhub-powered PBLPs and/or Project Broadcast text messages sent directly by Sparkhub.
Our DFs are reminiscent of those available in PB. You can use both in your texts. PB Dynamic Fields have two curly brackets on each side - for instance, {{firstName}} for the contact's first name.
SDFs are an essential component in making your Sparkhub setup easily duplicatable across your Events and even to other Sparkhub users. Certain SDFs can also be used in order follow-up workflows.
Details
Uses include
- On a Project Broadcast Landing Page: if the PBLP contains the correct header code and is associated with a Sparkhub Event, any text or header block containing a SDF will be replaced when the page is viewed normally (not in the design screen). In addition, link destinations or image URLs containing SHDFs will also get replaced.
- Example: an image with URL https://sparkhub.s3.amazonaws.com/host/{shEventID} points to the URL where the host photo is stored, if the host (or you) provided one in the Host Portal. If none exists, this area of your page will just be empty.
- Example: you can create a button to the order link, with label "Shop {shHostFirst}'s Party" and destination {shOrderLink}. It will display with the Host's name and point to your order link.
- Example: your Signup Page can display the Event description you specify in your Event settings, including formatting, by simply adding {shEventDescription} to a text field.
- In any individual Project Broadcast text message initiated by Sparkhub
- IMPORTANT: if you have a PB message containing a SHDF, and you send this message directly from PB, the SHDF will NOT work. Project Broadcast has no knowledge of SHDFs. Instead, such messages must be sent via Sparkhub so that Sparkhub can replace the text as it hands it off to PB.
- You may put SHDFs into a Project Broadcast Message Template. Then, as long as Sparkhub is sending the Template, it will replace the text upon sending. Just remember not to use the Template outside of Sparkhub. Think of it this way: Sparkhub knows what the SDF means, but Project Broadcast does not.
- Example: your welcome message to guests can refer to the Host by name. An order reminder text can include the specific order link for the Event. A host coaching text can include the current number of guests for their quick reference.
- Example: in a customer order follow-up message, your text can refer to the item(s) they ordered by using a Dynamic Field.
- In certain Sparkhub Event settings; for example...
- Key Date links: a Key Date may contain a SDF in the "location" area, such as the Event's order link. Then, it will show the correct order link on PBLPs, and when added to the guest's calendar using the "add to calendar" feature.
- In the Event Description: you can, for instance, refer to your Host by name by using the {shHostFirst} field in the Event Description.
When do SDFs not work?
- Do NOT use SDFs in Project Broadcast messages not sent via Sparkhub
- Do NOT use SDFs in Key Date descriptions, since they will not display properly in the Host Portal
- Do NOT use SDFs in To-do descriptions or details for Events.
- Do NOT use SDFs in individual messages inside a Project Broadcast Campaign, or in a Keyword Reply. Even if Sparkhub initiates adding a Contact to the Campaign, or initiates applying a Keyword, Sparkhub does not handle the sending of the resulting messages in these cases, and thus cannot replace text for you.
- Do NOT use SDFs in an "add to Contact's Notes" Spark, except for SDFs associated with an order you are logging. Event-related SDFs will not work in notes.
Available SDFs
List of SDFs associated with Events
These only work in the context of a specific Event - for instance, in the texts in the Event Timeline, or on a PBLP used for the Signup Page or Party Page of the specific Event. They will not work in order follow-ups.
- Links
- {shOrderLink} = the order link you specify in the "basic info" tab
- {shSignupPage} = the link to the signup page
- {shPartyPage} = the link to the Party Page. When sent in a PB text to a signed-up guest, it will turn into a link specific to the guest and thus be able to display guest-specific info.
- https://my.sparkhub.app/h/{shEventID} = link directly to the Host Portal. Accessible to the Host if you have listed them in the Host tab, saved the event, AND clicked the "Send Portal" button which grants their access.
- Basic Event info
- {shEventID} = the Event ID
- {shEventName} = the Event name you specify in the "basic info" tab
- Host info (will be blank if none exists)
- {shHostFirst} = Host first name
- {shHostLast} = Host last name
- {shHostSignupNote} = Host signup page note, configured by you in the Signup tab and/or by the Host in the Host Portal
- {shHostWelcomeNote} = Host welcome note, configured by you in the Host tab and/or by the host in the Host Portal
- https://sparkhub.s3.amazonaws.com/host/{shEventID} = Host photo. This must go in the "Image URL" area of an image block on a PBLP. If no Host photo is provided in the Host Portal, this won't display anything and will look fine.
- Signup info
- {shEventDescription} = the description you configure in the Signup tab
- {shGuestCount} = number of signed up guests on the Event
- https://sparkhub.s3.amazonaws.com/inv/{shEventID} = Signup page photo. This must go in the "Image URL" area of an image block on a PBLP. If no signup photo is provided in the Signup tab of the Host Portal, this won't display anything and will look fine.
- https://sparkhub.s3.amazonaws.com/shr/{eventid} = photo you give Host to share the event. This isn't commonly used, unless you're creating a custom host portal on a PBLP.
- Individual guest info: these work on Party Pages when viewed by a specific guest, so long as they are viewing their unique link (which they see upon redirection from the Signup Page, and which they receive in texts if you use the {shPartyPage} Dynamic Field). Otherwise, they will just be blank. These do not work in texts; instead, use the PB Dynamic Fields like {{firstName}}.
- {shGuestFirst}
- {shGuestLast}
List of SDFs associated with orders
When you create a Workflow to use when a Contact orders, each Task in it can contain SDFs related to the order. For example, you can reference the items ordered when sending a thank-you text, inside a future To-do you create for yourself, or as an addition to the Contact's Notes in PB.
- {shOrderedItems} = the item(s) you optionally indicate when logging the order
- {shOrderDate} = the order date you indicate when logging the order. It defaults to the current date if you don't specify otherwise.
- {shTodaysDate} = equals the date you initiate the Workflow
List of account-wide SDFs
These are based on your Profile information or the information you provided when you joined Sparkhub. These fields make it easy to share your Sparkhub setup with other users. For example, a PBLP containing multiple product links can be created using {shMySite} so that, when your teammate uses the page for their events, their own personal shopping site will be swapped in without them having to update links one-by-one.
- {shMyFirst}
- {shMyLast}
- {shMyPhone}
- {shMyEmail}
- {shMyCompany}
- {shMySite}
Code Blocks on Landing
How to add a code block
Header Code
In order to have Sparkhub customize a Project Broadcast Landing Page (PBLP) for use as an Event's Signup Page or Party Page, that PBLP must contain special header code in an HTML block near the top of the page. This allows Sparkhub to identify the Event the page is for and, in turn, apply its "magic" to the page:
- Sparkhub Dynamic Fields are replaced with their correct values;
- Other code blocks (Key Dates display, guest list, and sign-up form) work properly;
- Google Fonts selected in the Event's settings are applied.
In order for any code to work further down the page, you need this in an HTML block near the top. Furthermore, this code allows your page to accommodate Sparkhub Dynamic Fields.
<!-- Sparkhub header code: 05.2024 -->
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script type='text/javascript'>
var x=window.location.href.split("/");
var originalDocument = document
document.body.style.display = 'none';
var urlParams = new URLSearchParams(window.location.search)
var eventId = urlParams.get('id')
console.log(x)
var slug = null;
if (x.length > 5) {
slug = x[5].split('?')[0]
}
console.log(slug)
window.addEventListener('load', () => {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = (e) => {
if (!xhttp.responseText) {return;}
var response = JSON.parse(xhttp.responseText);
var eventInfoElmt = originalDocument.getElementById('event-info-anchor');
var tableContent = response.kdTable
if (response.keyDates && eventInfoElmt) {
response.keyDates.forEach(kd => {
var key = '%KD%' + kd.idx;
tableContent = tableContent.replace(key,new Date(kd.date).toLocaleTimeString([], {month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'}));
});
eventInfoElmt.innerHTML = tableContent;
}
var hostFeatureElmt = originalDocument.getElementById('host-feature');
if (hostFeatureElmt) {
hostFeatureElmt.innerHTML = response.hostFeature;
}
var shoppingLinkElmts = originalDocument.getElementsByClassName('shopping-link-anchor');
Array.from(shoppingLinkElmts).forEach(elmt => {
elmt.innerHTML = response.shoppingLink;
});
var guestWelcomeElmt = originalDocument.getElementById('guest-welcome-anchor');
if (guestWelcomeElmt) {
guestWelcomeElmt.innerHTML = response.guestWelcome;
}
var guestListElmt = originalDocument.getElementById('guest-list-anchor');
if (guestListElmt) {
guestListElmt.innerHTML = response.guestList;
}
var sparkText=response.textTranslation;
console.log(sparkText)
var newBodyText = originalDocument.body.innerHTML;
Object.keys(sparkText).forEach(function(t) {
newBodyText = newBodyText.replaceAll(`{${t}}`, sparkText[t]);
});
document.body.innerHTML = newBodyText;
document.body.style.display = 'block';
var fonts = response.fonts;
if (fonts.body) {
document.body.style.fontFamily = fonts.body?.font;
document.body.style.fontSize = fonts.body.size;
document.body.style.color = fonts.body.color;
document.body.style.fontWeight = fonts.body.weight;
}
Object.keys(fonts).filter(k => k !== 'body').forEach(k => {
headers = Array.from(document.getElementsByTagName(k))
headers.forEach(h => {
if (fonts[k]) {
h.style.fontFamily = fonts[k].font;
h.style.fontSize = fonts[k].size;
h.style.color = fonts[k].color;
h.style.fontWeight = fonts[k].weight;
}
});
});
WebFont.load({
google: {
families: Object.values(fonts).filter(x => !!x.font).map(f => f.font)
}
});
};
const eventDataUrl = slug ? 'https://my.sparkhub.app/api/events/event/' + eventId + '/' + slug : 'https://my.sparkhub.app/api/events/event/' + eventId
console.log(eventDataUrl)
xhttp.open('GET',eventDataUrl,true);
xhttp.send();
});
</script>
Key Dates Feature code block
- What it displays: this block shows all Key Dates associated with the Event, with an “add to calendar” option for each (iCal and Google Calendar), and a clickable link (if one was given) for the Key Date based on what you set up in the Event.
- Note: the result of this code block will not display when you are inside the editing mode for your PBLP. It will just look like a blank space. However, it should display when viewing the PBLP itself.
- When a link is given, it will be labeled "open link" unless it's to a Google Map location, in which case it is labeled "open
- What you need to do: set up Key Dates in the Event Timeline, including start time, (optionally) end time, description, and (optionally) a link. The link can be anything. If it is to a Google Map (recommended for in-person events), then the link will be titled, “open map.” Otherwise, it will be titled “open link.” Use cases are links to Zoom calls, Facebook groups, Sqweeevents, shopping links associated with an order deadline, etc.
- Tip: the link can be a Sparkhub Dynamic Field such as {shOrderLink}.
- The code:
<! –– Sparkhub code: Key Dates display ––> <div id = "event-info-anchor"></div>
Guest List
- What it displays: this block displays the word "Guests" followed by the guest list. If no one has yet signed up, it will not show anything.
- If you check the box in your Event setup to "hide guest list on signup page," then this will stay hidden.
- The code:
<!-- Sparkhub code: guest list --> <div id = "guest-list-anchor"></div><br>