Client Teaser Documentation

Client teaser example

Introduction

Client Teasers is a simple way for clients to both style the page, making it more relevant for your customers, and also presenting reasons why users should create an account / sign in to purchase or access your products.

How it works

When you create a new client teaser, you will write markdown and CSS. The markdown will be converted into HTML together with the CSS and some extra JavaScript that is required for cross-origin iframes to work.

The HTML-page will then be uploaded to our CDN (Content Delivery Network) in order for us to serve your users in the most efficient way. Each upload will be an unique file so each change should be seen immediately after the upload is complete and served at the very next request. When starting the login/signup flow, the teaser will be loaded inside an iframe element.

You may have more than one teasers running at the same time, but only one can be default one. You can choose which teaser should be shown to user using teaser parameter. This parameter takes values from "Teaser slug" input field.

Each input field explained

Teaser description

The description field is a short text to explain what the teaser is about. Given the campaign example above, a good description could be “Shows our special campaign prices for campaign y”.

The description is shown in the summary of all your client teasers.

Default

Determines which teaser is the default one in case special URL parameter teaser is omitted. Only one teaser can be default one at given time. If you set teaser as default, current default one will be unset.

Teaser slug

This is URL-safe (basic characters a..z and "-") value which when used in URL will override default teaser.

Teaser CSS

The “Teaser CSS” input field is where all the CSS that is styling your HTML will go. We do not have any specific rules about this one except it is a good idea to style your elements with a thought about the teasers will be shown on different screen sizes and resolutions so you will have to abide to usual styling guidelines that works for different resolutions.

Data-uris are currently not supported, so all images needs to be loaded for external sources via HTTPS.

Teaser Markdown

For the client teaser we use markdown that converts into HTML along with the CSS. Markdown is a simple way to write things that will convert into html without actually having to know HTML. If you have ever blogged with Ghost or commented on Reddit you probably already know it. Anyway it’s really simple and you will get the gist of it in minutes.

Why Markdown?

We chose markdown over HTML to solve issues that HTML has such as you can add or make mistakes and easily create incorrect documents. But most importantly we use markdown because of the security concerns that were raised with normal HTML input. Basically we use markdown to provide security for us and our users as we try to provide as much of freedom of expression to you, the clients, as possible.

As such, HTML shouldn't be used.

How do I use it?

For the markdown we use everything that is “common” to markdown documents with our special sauce on top to add ids and classes to your elements. To try your markdown a good place could be Parsedown demo page since that is the library we made use of. Of course, as the CSS classes and ids are an extension of that library it will not work for their demo page.

You may want to write your markdown in a seperate editor and we can recommend Mou which is a native client for the OS X operating system. If you run Windows, Linux or other operating systems there most likely exist similar software for your platform or even web-based ones.

You also have our stage/pre environments and we recommend that you test all your teasers there first before deploying them in production.

How do I style elements with CSS?

To style elements with CSS you may of course style tags as you are used to. But you may want to use classes or even ids in your HTML to style your document. For that we have, as mentioned above, extended the markdown converter to support that.

For example, you can add an id or class to your markdown by simply adding {#my-id} or {.my-class} by the end of the line. You may also use several classes for elements if you want to use more advanced styling like {.box yellow}. If you use several classes, please note that a dot is only needed in the beginning to tell the compiler that it is a CSS class.

If you make use of classes or ids, this is simple examples of the HTML it will produce:

#This is a header with an id {#with-an-id}
#This is a header with a class {.with-a-class}
#This is a header with two classes {.first-class second-class}
#This is a header with two classes in one {.box.red}
#Please note the two dots {.first-class .second-class}

Which will render to:

<h1 id="with-an-id">This is a header with an id</h1>
<h1 class="with-a-class">This is a header with a class</h1>
<h1 class="first-class second-class">This is a header with two classes</h1>
<h1 class=?box.red?>This is a header with two classes in one</h1>
<h1 class=?first-class .second-class?>Please note the two dots</h1>

As you may see from the example given above, we tried to make it as straight forward as possible for you to use.

How to add a new teaser for your client

To begin creating your first client teaser you have to access the self-service. For Norwegian clients go to https://selfservice.payment.schibsted.no and for Swedish clients it is https://selfservice.login.schibsted.com. There you will have to make sure you are given the correct access before you can start, if you do not have access to self-service, but should have, you will need to contact SPiD support at schibstedaccount@schibsted.com.

When you have access, follow these steps to begin to create a client teaser:

  1. Choose your merchant in the first menu.
  2. When the second client menu appears, choose the client you want to add a client teaser to.
  3. When the third menu-level is shown, click on “client teasers” and then click on the “new”-button.

Now you should see the display of a page like this:

Add a new client teaser

Now, all you need to do is fill in the fields as described above in “Each input field explained”, activate and press save and it will be compiled, uploaded and served for the very next request.

The summary of client teasers

Client teaser summary

As you may see on the figure above the summary of client teasers are quite simple. You may edit an existing client teaser that will create and upload a new file on our CDN so any previous cached version will hence be refreshed with a new page.

If you have a lot of teasers you also have the ability to simply delete a client teaser, note that if you delete a client teaser it is a hard deletion and there is no way for us to get it back. Once deleted, it stays deleted and you will have to create a complete new one if you wish to get it back as it was.

New flow style

Client teaser example

If you are using the new login flow the teaser should not be taller than the login form to the right. You can prevent the teaser from becoming scrollable by adding:

 body {
     max-width: 100%;
     max-height: 100%;
     overflow: hidden;
 }

Example

In this example we show how to use a background image with a title and some text on top.

Feel free to use this markdown and CSS as a starting point for your new teaser.

Teaser markdown:

{.img-bg}

# This is the header {.title}

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat nibh at aliquam tristique. Sed euismod lacus at risus fermentum varius. Sed suscipit, sem vel finibus aliquet, libero nibh efficitur orci, a placerat elit neque a elit.  {.description}

Teaser CSS:

Notes (see the numbered comments in the CSS below):

  1. For teasers using the new login flow, when backwards compatibility is needed. The old style teaser needs actual content to render full height, a background image is not detected as actual content, it can be fixed by setting a min height.
  2. To prevent scrolling inside the teaser's iframe.
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);

html {
    width: 100%; // 1.
    height: 100%; // 1.
    min-height: 390px; // 1.
}

body {
    max-width: 100%; // 2.
    max-height: 100%; // 2.
    overflow: hidden; // 2.
    margin: 0;
    padding: 0;

    font-family: "Roboto Slab", "Helvetica", sans-serif;
    color: #fff;
}

.title {
    font-size: 28px;
    line-height: 1.29;
    font-weight: 900;

    margin: 58px 24px 34px 24px;
}

.description {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;

    margin: 0px 24px;
}

.img-bg {
    margin: 0;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://mir-s3-cdn-cf.behance.net/project_modules/1400/10c3b345009807.5824a9200dbbd.jpg) no-repeat left top;
    background-size: cover;
    z-index: -1;
}

Help us improve

Did you spot an error? Or maybe you just have a suggestion for how we can improve? Leave a comment, or better yet, send us a pull request on GitHub to fix it (in-browser editing, only takes a moment).

History of this page

Comments/feedback

Do you have questions, or just want to contribute some newly gained insight? Want to share an example? Please leave a comment. SPiD reads and responds to every question. Additionally, your experience can help others using SPiD, and it can help us continuously improve our documentation.