At Sleeknote, we’re constantly working around the clock to ensure Sleeknote works perfectly for each of our customers.
As Sleeknote’s product marketer, it’s my duty to tell you about all of our awesome product updates and today, I have good news!
Our new updates include…
…improved CSV files, updated email service provider integrations, updates in the editor, and some new advanced options.
In this blog post, you’ll learn all about these updates and more importantly, when and how to benefit from them.
Put simply, you’ll learn how to become a master sleeknoter.
Let’s get started.
Improved CSV files
In case you’re unfamiliar, a CSV file is a file of Comma Separated Values that saves your data in a table structured format.
All the data collected from your SleekBoxes is saved in CSV files.
While that might sound boring, these CSV files can be used for a number of things.
For instance, you may not have integrated with your email service provider (ESP). In that case, you’ll need to download the CSV file for your SleekBox and upload the leads manually to your ESP.
Or, maybe you’re collecting data other than names and emails with your SleekBox such as phone numbers or survey answers. This data doesn’t go into any system which means you only have this data in your CSV file.
To get the CSV file for a SleekBox, click “Options” and select “Generate CSV”:
Then, go to “Account” and you’ll find your newly generated CSV file in the bottom of the page:
We decided to completely redesign our CSV files so they are easier to understand.
This means they’re now much simpler to read and way easier to import.
How to show different characters correctly in CSV files
Some customers are experiencing problems with getting Excel to show letters such as æ, ø, and å correctly in their CSV files.
We updated this to show characters from outside the English language.
To show this kind of characters in Excel, open a blank Excel document.
Then, click “Data” and choose “From Text”:
Then, click “File > Open” and select your recently downloaded CSV file.
Now for the important part.
You have the possibility of choosing the language of your document. Pick “Unicode (UTF-8)” and click “Next”:
This “language” can understand almost every alphabet in the world.
Adjust the layout of your CSV file as you like and click “Next”:
In the last step, you can adjust additional things for your file. For instance, choose your preferred way of showing a date:
When you’ve clicked “Finish” and chosen “Existing sheet”, your file should show all letters correctly.
Below, you can see the letter ‘ø’ is shown correctly:
Better integrations with your ESP
If you’re using Sleeknote to get more signups for your newsletter, you’ve probably integrated it with your ESP.
Eventually, though, you may want to add another input field such as “name” or “phone number”.
Previously, this would have meant removing the integration for your SleekBox and setting it up again for the new input field to show.
Now, the newly added field shows up automatically when you enter the integration in your SleekBox—ready for you to map it.
Unlimited number of elements in your SleekBoxes
Until now, the number of elements for a SleekBox has been limited.
We wanted to help you follow best practices as, for instance, not adding too many input fields.
We decided to remove this limitation since we realized it doesn’t make sense to follow these best practices in certain situations.
More artistic freedom, and even more customizable SleekBoxes.
When you’re creating your SleekBox and you reach the Settings page, you notice “Advanced Options”:
These are options you should only use if you’re absolutely sure what you’re doing.
I’ll explain these options below to give you a better understanding of when and how to use them.
One-page websites: URL change event listener
This option is only relevant if you’re creating a SleekBox for a single-page application website.
Contrary to other websites, single-page application websites fit into a single web page and load only once when you enter them.
Elements—other than the ones you see when you enter the site—are loaded and added to the page based on your actions on the site. But the page doesn’t reload at any point.
This is a problem if:
- You create SleekBox 1 and SleekBox 2 for your site
- You’ve excluded a specific page in the settings for SleekBox 1, and set SleekBox 2 to show on this page
- You enter your site and see SleekBox 1, as you should, but then, you go to the page you’ve excluded for SleekBox 1, and it still shows up.
Why is SleekBox 1 showing on this page even though it shouldn’t?
Because your site isn’t reloading when you enter this page.
I’m happy to inform you one-page-website owners, that our new feature solves this problem once and for all.
The feature can be found under “Advanced Options” for one-page websites and it’s called “URL change event listener”:
If you enable this feature, the URL of your site will be checked every second to see whether it has changed.
You should activate the URL change event listener for all the SleekBoxes on your single page application website.
If the URL changes in a way that is relevant for your SleekBox, the SleekBox script is reloaded.
This means, if you enter a page that is excluded for a SleekBox, it won’t be shown.
Likewise, if the URL changes to a page where you have set another SleekBox to show, the correct SleekBox is shown.
Now, this is a bit complicated at first but stay with me.
Every element on your website has a z-index.
The z-index is the number that determines how every element is positioned on the screen—the hierarchy of the elements, you might say.
The higher the number, the closer to the front the element will be placed.
Conversely, the lower the number, the farther from the front the element will be placed.
By default, your SleekBox is set to have a z-index of 999,999 to make sure that it shows up in front of everything else on the website.
However, it could be that you have a button or an element you want to show in front of the SleekBox.
Or maybe (though it’s unlikely), some of the elements on your website have a higher z-index than the SleekBox which means these elements show up in front of your SleekBox.
Most third-party applications you use on your website have a locked z-index, but Sleeknote doesn’t.
With our advanced options “Desktop z-indexes” and “Mobile z-indexes”, you can adjust the z-index for your SleekBox both for desktop and mobile to match your wishes.
Here’s how to do that:
Locate the z-index for the element you want to show either behind or in front of your SleekBox.
Depending on how your website is designed, you can find the z-index for its elements by right-clicking on the elements and choosing “Inspect”. Then you can search for your z-index.
However, if you can’t find it, we’re more than happy to do it for you—just let us know.
If you want to know more about z-index, take a look at this article.
Once you know the z-index for the element in question, choose a new z-index for your SleekBox.
Go to the settings page for your SleekBox and enter the “Advanced Options” in the bottom of the page:
Now, change the z-index for your SleekBox for desktop and/or mobile:
You can choose to only change the z-index for the SleekBox teaser or the box—that’s up to you.
If you want an element to show behind your SleekBox, set the SleekBox z-index to be higher than the element in question.
Likewise, if you want an element to show in front of the SleekBox, set the SleekBox z-index to be lower than the element in question.
One digit higher is enough. If the z-index of the element on your website is 12,000—and you want it to show behind your SleekBox—set the z-index for your SleekBox to be 12,001 or higher.
And, of course, if the z-index of an element on your website is 7,500—and you want it to show in front of your SleekBox—set the z-index for your SleekBox to be 7,499 or lower.
Over to you
If you’re reading this, there’s a good chance you’ve read over the explanations of some pretty complicated features—kudos to you!
I hope, you found this blog post useful.
As mentioned, some of the product updates are rather complex so if you have any doubts at all, feel welcome to reach out for help. That’s what we’re here for.
Have you tried any of the new features? Leave a comment below and share your experience.