App Snippet Migration

App Snippet used to accept raw HTML as a snippet's entire body, inline <script>, <style>, and <link> tags included. A backend converter took that HTML and turned it into JavaScript before serving it on the storefront.

That converter is now retired. The App Snippet editor is JavaScript-only: whatever you submit is uploaded to the CDN exactly as written, with no parsing or conversion step in between. If your app still has HTML-based snippet content sitting on the CDN, it needs to be rewritten as plain JavaScript before you save it again.

This guide walks through that rewrite, using the same mapping rules the old converter used to apply automatically.

Migration Required

Migrate your App Snippet before 5 September 2026, then publish your updated application through the Salla Partners Portal.

Migration Grace Period: 5 August 2026 – 5 September 2026

What Changed

Snippet Body

Raw HTML before, pure JavaScript now.

See before vs. now

Before: Raw HTML, with inline <script> / <style> / <link> tags.

Now: Pure JavaScript only, no HTML parsing happens on save.

Parameters

Parameter access has moved from server-side placeholders to salla.config.get().

See before vs. now

Store Data

{{store.domain}} before, store.url now — plus a much bigger catalog.

See before vs. now

Store Contact Info

Scattered across store.email / user.email / user.phone before, grouped now.

See before vs. now

Customer Data

Renamed before it's gone, now user.*.

See before vs. now

App Settings Values

Always resolvable before, Public-only now.

See before vs. now

Parameter Catalog: Old to New

The old converter resolved every {{namespace.key}} token server-side, before the page ever reached the browser. The new JS-only editor resolves the equivalent salla.config.get('namespace.key', '') calls at runtime, in the browser, which is why some tokens were renamed, moved, or added along the way. Use the tabs below to find where your old token landed.

Renamed / Moved / Dropped

Unchanged

New

These tokens either moved to a different key, or have no client-side equivalent anymore.

Old token	New token	Notes
`{{customer.id}}`	`user.id`	Namespace renamed: `customer.` → `user.`
`{{customer.name}}`	`user.first_name` + `user.last_name`	Renamed and split into two fields
`{{customer.email}}`	`user.email`	Namespace renamed
`{{customer.mobile}}`	`user.mobile`	Namespace renamed
`{{user.id}}`	None	No direct client-side equivalent
`{{user.email}}`	`store.contacts.email`	Moved under `store.contacts.*`
`{{user.phone}}`	`store.contacts.phone`	Moved under `store.contacts.*`
`{{store.domain}}`	`store.url`	Renamed
`{{store.email}}`	`store.contacts.email`	Moved under `store.contacts.*` (merges with the old `user.email`)

For the full list of reserved store.* and user.* parameters, check the Store Parameters panel in the App Snippet editor.

The user namespace means something different on each side of this migration. In the old syntax, {{user.*}} referred to the store owner's contact details (now under store.contacts.*). In the new syntax, user.* refers to the shopper browsing the storefront (the old {{customer.*}}). Don't assume {{user.email}} and salla.config.get('user.email') are the same person.

user.* shopper data (id, email, mobile, name, country code) is resolved client-side and will appear directly in your snippet's rendered output — visible to anyone who opens dev tools or views page source. Only reference these fields when that visibility is an acceptable trade-off for the feature you're building.

Rewriting `{{namespace.key}}` as `salla.config.get()`

How you rewrite a token depends on where it sits in your code.

Template literal / bare text

Quoted string

Bare in code

Wrap it in ${...}:

Always keep the '' as the second argument, it's the fallback value used when the key isn't set.

Converting HTML Elements to JavaScript

HTML	JavaScript equivalent
`<link rel="stylesheet" href="...">`	`var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = '...'; document.head.appendChild(link);`
`<script src="...">`	`var script = document.createElement('script'); script.src = '...'; document.head.appendChild(script);`
`<script>...</script>` (inline)	Move the code in directly, no wrapper needed, just apply the parameter rewrites above to any tokens inside it
`<style>...</style>`	`var style = document.createElement('style'); style.innerHTML = '...'; document.head.appendChild(style);`
Remaining markup (divs, buttons, text)	`document.body.insertAdjacentHTML('beforeend', '<markup>')`, use `'afterbegin'` if the snippet is placed in `head`
`<meta>`, `<iframe>`, HTML comments	No direct equivalent, and `iframe` is disallowed by the JavaScript Rules anyway. Re-implement by hand only if truly necessary

Worked Example

Before (HTML snippet)

After (pure JavaScript snippet)

The original HTML-based snippet, as it looked before the converter was retired.

Exposing App Settings Client-Side

salla.config.get('app.<key>') only returns a value if that setting has been explicitly exposed. Server-side, every App Setting is available regardless, client-side access is opt-in.

Open the form builder

Open your app's App Settings form builder in the Partners Portal.

Mark the field Public

On the field your snippet needs, tick Public.

Check the Hide flag

Confirm Hide isn't enabled on that field, hidden fields stay excluded even when marked Public.

Note the key

The field's id becomes the key. A field with "id": "roulette_border_color" becomes salla.config.get('app.roulette_border_color', '').

Leave secrets private

Leave Public off for anything that shouldn't reach the browser, API keys, tokens, secrets.

Save

Save the form. The value appears in salla.config on the next storefront page load.

Migration Checklist

Pull the content

Pull the current HTML snippet content.

Split it apart

Split it into pieces: plain markup, <link>, <script src>, inline <script>, <style>, and anything else (<meta>, <iframe>, comments).

Convert each piece

Convert each piece using the element mapping above.

Rewrite tokens

Find every {{namespace.key}} token and rewrite it per the syntax rules, double-checking the parameter catalog for renamed or moved keys — store.domain → store.url and customer.* → user.* especially.

Expose app settings

For each {{app.*}} token, mark the matching setting Public as described above.

Paste into the editor

Paste the resulting JavaScript into the JS-only snippet editor, replacing the HTML content entirely.

Test on a demo store

Confirm the block renders and every salla.config.get(...) call returns the value you expect.

Save

Save, and ensure the removal of the old HTML-based snippet content.

You can also paste your legacy snippet into an AI agent and ask it to rewrite it following the rules on this page, especially handy if you have the Salla AI Agent Kit set up.

Publish Your Changes

After completing the migration and verifying your snippet works as expected, submit a new publish request of your application through the Salla Partners Portal so merchants receive the updated implementation.

Before publishing, make sure you have:

✅ Migrated your App Snippet to the new JavaScript editor.

✅ Tested the snippet on a demo store.

✅ Verified all functionality works correctly.

✅ Submitted a new app publish request.

For detailed instructions, see the Publishing Your Application guide.

HTML to JavaScript Snippet Migration

What Changed#

Parameter Catalog: Old to New#

Rewriting {{namespace.key}} as salla.config.get()#

Converting HTML Elements to JavaScript#

Worked Example#

Exposing App Settings Client-Side#

Migration Checklist#

What Changed

Parameter Catalog: Old to New

Rewriting `{{namespace.key}}` as `salla.config.get()`

Converting HTML Elements to JavaScript

Worked Example

Exposing App Settings Client-Side

Migration Checklist