All Collections
Australia Help Articles
Configurations
[AU] Add a custom CSS template
[AU] Add a custom CSS template

How To Add A Custom CSS Template To Provide A Seamless Experience To Your Customer When Viewing Any Of Our Shareable Links

Updated over a week ago

Note: This article is relevant to merchants integrating with Zepto in Australia.

Want something a bit different than our out of the box experience?  No problem, upload your custom CSS templates to style the look and feel of the Zepto hosted pages that your customers interact with. 

You can apply a custom CSS template to shareable links that you send to your customers including:

  • Open and Unassigned Agreements

  • Payment Requests

  • Invitations to get paid (Contact Invitation)

Step 1 - Add your CSS Template

  1. Log in to your account

  2. Click on your name in the top left-hand corner 

  3. Click on Custom Templates

  4. Click on Add a custom template

  5. Give your template a name and add your custom CSS code

  6. Click on Create Template to finish

Note: Once you've created your custom template you'll be given a Linkable ID. This can be added to a query string, more information on this further down.
​

Step 2 - Using your CSS template

We provide two possible options to best suit your needs.

Option 1: Via the link builder in our UI

  1. Go to Agreements

  2. Find the agreement you want to apply the CSS to and click View Link

  3. Click on Optional settings

  4. Click on Custom CSS template and select your template 

Option 2: Manually (for developers)

Simply append the query string parameter custom_template  with the Linkable ID to the shareable link.

Below is an example of an Open Agreement link with the custom_template appended to it.

https://go{.sandbox}.split.cash/open_agreements/7778f2f03-416d-4ed5-8ac2-27eeef757c73/agreements/invitation?custom_template=92c95d3d-bce4-490a-a52c-9fc60c1a5142 

Feel free to reach out if you have further questions by emailing us directly at support@zepto.com.au or clicking on the green bubble icon from the corner of the screen.

Did this answer your question?