All Lightweight templates have a context object with template-related information. To see the current content of context, you can hover your mouse over the context variable in a template. Alternatively, you can output the content to the console, for example:
// JS tab
createEffect(() => {
console.log(context); // log context to browser console
});
You should not modify context directly in your template, as this may result in overwriting existing properties. Use JavaScript variables instead (const, let, var):
Don't do:
// JS tab
context.someValue = 10;
// JSX|HTML tab
<div>{context.someValue}</div>
Do:
// JS tab
const someValue = 10;
// JSX|HTML tab
<div>{someValue}</div>
Context types
Common context
All template contexts contain the following common properties:
t: (sourceString: string, template?: Record<string, string | number | boolean>) => string;
trc: (context: string, sourceString: string, template?: Record<string, string | number | boolean>) => string;
user?: {
given_name: string;
family_name: string;
valid: boolean;
sub: string;
email: string;
email_confirmation_required: boolean;
pre_confirmed_user?: boolean;
pn_cr?: boolean;
exp: number;
firstName: string;
r: boolean;
rememberMe: boolean;
uid: string;
lastName: string;
confirmed: boolean;
} | null;
pianoUrl: string;
app: {
aid: string;
name: string;
logo1?: string;
logo2?: string;
businessUrl: string,
userProvider: string;
};
custom: Record<string, unknown>;
close: () => void;
register: () => void;
login: () => void;
isLogoutAllowed: () => boolean;
logout: () => void;
startCheckout: ({ term }: { term: ITerm }) => Promise<void>;
isUserValid: () => boolean;
viewsLeft: () => number | null;
isCloseButtonVisible: boolean;
Specific template context type
Adblocker
offerId: string;
termList?: {
[key: string]: unknown;
termId: string;
type: "payment" | "external" | "gift" | "dynamic" | "registration" | "linked";
price: string;
firstPeriod: string;
description: string;
name: string;
isZero?: boolean;
firstRealPrice?: number | string;
hasFreeTrial?: boolean;
}[];
toScreen: (screenName: string) => void;
isScreen: (screenName: string) => boolean;
onScreenChange: (cb: (screenName: string) => void) => void;
areLocalesEnabled: boolean;
selectedAdblockerExtension: Accessor<{
id: string;
name: string;
logoURL: string;
videoURL: Record<string, string>;
} | null> ;
setSelectedAdblockerExtension: Setter<{
id: string;
name: string;
logoURL: string;
videoURL: Record<string, string>;
} | null> ;
adblockerExtensions: Accessor<{
id: string;
name: string;
logoURL: string;
videoURL: Record<string, string>;
}[]>;
setAdblockerExtensions: Setter<{
id: string;
name: string;
logoURL: string;
videoURL: Record<string, string>;
}[]>;
browser: () => string;
Affiliate
offerId: string;
termDescriptions: string[];
availableCredits: () => number;
redemptionMethod: () => string | null;
creditExpirationDate: () => Date;
creditExpirationDateFormatted: () => string;
toggleRedemptionMethod: () => void;
redeemCredit: (e: Event) => void;
fetchOffer: () => void;
price: () => string;
authBySocial: (socialName: string) => void;
term?: () => ({
[key: string]: unknown;
termId: string;
type: "payment" | "external" | "gift" | "dynamic" | "registration" | "linked";
price: string;
firstPeriod: string;
description: string;
name: string;
isZero?: boolean;
firstRealPrice?: number | string;
hasFreeTrial?: boolean;
}) | null;
Churn prevention
acpEvents: typeof ACP_EVENTS;
subscription: Resource<{
amount: number;
billing: string;
expirationDate: string;
name: string;
nextBillDate: string;
resource: string;
status: string;
termId: string;
isShared?: boolean;
}>,
formattedExpirationDate: () => string;
checkoutFlowId: string;
Meters
activeMeters: string;
subscribe: () => void;
Newsletter
siteId: string;
mailingListIds: string;
isSignupScreen: () => boolean;
isSuccessScreen: () => boolean;
isScreen: (screenName: string) => boolean;
addScreen: (screenName: string) => void;
toScreen: (screenName: string) => void;
newsletterSignupSubmit: (ev: InputEvent) => Promise<void>;
email: () => string;
newsletterSignupInput: (email: string) => void;
error: () => string;
emptyError: string;
invalidFormatError: string;
isLoading: () => boolean;
changeErrorList: (errorList: Record<ERROR_LIST, string>) => void;
Offer
isGiftTerm: (term: ITerm) => boolean;
isPaymentTerm: (term: ITerm) => boolean;
isDynamicTerm: (term: ITerm) => boolean;
isFreeDynamic: (term: ITerm) => boolean;
isPayableTerm: (term: ITerm) => boolean;
isExternalTerm: (term: ITerm) => boolean;
offerId: string;
termList?: {
[key: string]: unknown;
termId: string;
type: "payment" | "external" | "gift" | "dynamic" | "registration" | "linked";
price: string;
firstPeriod: string;
description: string;
name: string;
isZero?: boolean;
firstRealPrice?: number | string;
hasFreeTrial?: boolean;
}[];
getButtonText: (item: { price: string; firstPeriod: string }) => string;
Site licensing
isScreen: (screenName: SITE_LICENSING_SCREEN) => boolean;
selectedContractId: () => string | undefined;
setSelectedContractId: (contractId: string) => void;
showContractInfo: () => void;
redeemStatus: () => string | undefined;
redeemStatusRequestState: {
loading: () => boolean;
error: () => boolean | undefined;
};
contractInfo: () => {
contract: {
contractId: string;
appId: string;
scheduleId: string;
resourceId: string;
licenseeId: string;
contractState: "ACTIVE" | "INACTIVE";
seatsLimitType: "SOFT" | "HARD";
landingPageUrl?: string;
name: string;
seatsNumber: number;
createDate: string;
};
licensee: {
appId: string;
licenseeId: string;
name: string;
description: string;
logoUrl?: string;
};
homepageUrl: string;
periodStartDate: string;
periodEndDate: string;
} | undefined;
contractInfoRequestState: {
loading: () => boolean;
error: () => boolean | undefined;
},
contractsListRequestState: {
loading: () => boolean;
error: () => boolean | undefined;
},
contracts: () => ({
contractId: string;
appId: string;
scheduleId: string;
resourceId: string;
licenseeId: string;
contractState: "ACTIVE" | "INACTIVE";
seatsLimitType: "SOFT" | "HARD";
landingPageUrl?: string;
name: string;
seatsNumber: number;
createDate: string;
}[]);
contractOptions: () => {
id: string
text: string
}[];
Upgrade offer
isGiftTerm: (term: ITerm) => boolean;
isPaymentTerm: (term: ITerm) => boolean;
isDynamicTerm: (term: ITerm) => boolean;
isFreeDynamic: (term: ITerm) => boolean;
isPayableTerm: (term: ITerm) => boolean;
isExternalTerm: (term: ITerm) => boolean;
upgradeVariants: Accessor<IUpgradeOfferViewItem[]>;
BILLING_TIMING: typeof BILLING_TIMING;
startClassicUpgradeOfferCheckout: (termToId: string, termChangeOptionId: string) => void;
termsImgSettings: Record<string, Record<string, string>>;
Pure
Has only common context properties.
Push enrollment
Has only common context properties.
Registration
subscribe: () => void;
Add custom variables to context
Any custom variable that has been set prior to showing the offer template will be available within the custom object. Note that custom variable names are case-sensitive and should only contain alphanumeric characters and underscores.
For example, if you set some custom variables like this:
HTML
<script>
tp = window["tp"] || [];
// Setting custom variables
tp.push(['setCustomVariable', 'fullName', 'John Smith']);
tp.push(['setCustomVariable', 'city', 'New York']);
tp.push(['setCustomVariable', 'weather', '70']);
</script>
You can then access those custom variables in any template like this:
HTML
<span>Hello, {context.custom.fullName}
It's nice weather in {context.custom.city}: {context.custom.weather} F
</span>