Hi and welcome to all in this new Marketo Office Hour. We will show this morning a new SAS application called Otowui, which will allow you to create as many email templates, landing page templates as you wish with your own branding. You will be able to export all those templates into Marketo and fine-tune them further. Let's deep dive now and have a look at all the functionalities of this new application. Before showing you Otowui, I wanted to show the journey my customers usually take regarding all those templates, email or LP, and that usually takes them two or three years. What's the point of having Marketo templates? Usually it helps you save time. It helps you be compliant with the brand charter of your company. It helps you to have a clear structure in your email and you don't need any technical skills, whether it's HTML or CSC, to create beautiful emails and LP with the correct template. So usually everybody starts with the Marketo templates, which are free thanks to Marketo, and the internal team, the communication team, the web design team tries to modify those templates. So by the way, we have a training dedicated to the design team to help them modify the templates and understand all the Marketo logic behind the templates. So usually you start with that, it's free, it's only internal costs, but the impact you have with those templates is not great because you start with something that will not be totally aligned with your brand or that will lack maybe the functionality you want. So usually they're looking for a freelancer, and there are some freelancers on the market that can do great templates. I used some of them at first and in the long run and I had some issues because the maintainability was not great and I had bugs that could not correct. Then I tried a solution called Knack, which is Canadian, which is a great solution. Unfortunately, when I proposed Knack to my customers in Europe, in France particularly, the price range of Knack is not really compatible with markets such as France, which is not as mature as the US or the Nordics, where you can justify investing in a solution like Knack. In France, we are a bit behind and budget are tight, so usually it's too expensive. So I will not talk about that. If you use Knack, you will have a great freedom because you will be able to do as many templates as you want. There's an external cost and an internal cost because your team will have to create their templates. I will not talk about the non-specialised agencies. I have a customer who tried to have their templates done by generalist agencies, and it's usually a mess because there are a lot of bugs, the impact is not so great and that costs a huge sum. So my preferred solution would be to use a dedicated specialised marketing agency to create the templates so that it's bug-free, you have a great freedom because you have forecasted all the modules you wanted. And we will show you this morning Otowui, which is very good for the tight budget because we will see the pricing is under 10K, it's exactly 7,200 euros per year if you take email plus LP for as many templates as you want. That's pretty great for France, for instance, and you will have the liberty to create as many templates as you want, and with no technical skills needed. So let's switch directly to Otowui. So now I'm in my Otowui app, which exists in English and French. I see here my dashboards and I can create new emails, web pages, a signature is also included. There are some small solutions like HTML code, but what we want to do first is create our branding. Let's take a real example: let's say I'm working today for Netflix and I want to create an email template and language template for Netflix. So the first thing I will do is to create the Netflix branding so that it will be applied automatically each time I create a new email and landing page. So I took the liberty to collect the colour, this image, the red here and all the colours from Netflix. Obviously, when you work for a customer or internally, you've got the charter that we give you exactly the logo, the favicon, the colours and all that. Here we add to cheat a bit. So let's create first the Netflix branding: I will create here Netflix, I will enter the default Netflix address, so that's by default behind all links in emails, it will be this link, which is this one, just to be sure. The favicon, I've got it here previously inspecting the Netflix page. So this is the favicon. A favicon is this small image here that you see on your browser tab. The logo for the light background… Let me just save this. I will first go into my media library and I will upload a file I got previously. Where did I put that? In video, in my file dedicated to Otowui, I've got the Netflix logo here, which is here. So that gives me a link that could be used next. I could also change a bit the image here. We can resize, crop, transform and do plenty of things on the image. That's great. So I just want to take the logo and put that into my branding. It's absolutely the same logo for the light and dark backgrounds, so let's say that. I'll come back. Netflix is using the roboto1, so let's use this one. And for the title, we some bold. Let's keep the fall back font with sans-serif here, let's take roboto without without sans-sherif, and let's add the colour: so the primary color is this one. And it's the same for the secondary. The colour lights is white, and here we put the two reds we collected before. So this one is great. The colour highlight is this one. And the highlight two is this one. So what does this mean? It means that you have a red, and when you hover on the button, you have another red, which is slightly different. Here, for the colour, the background light, we want also white. Here we want dark. That pretty much looks like Netflix, right? We could add a number of social networks links. So here I would indicate the URL and the image for the Netflix Facebook, for Twitter, Instagram and Pinterest, YouTube, so that if I want to insert those images on any email, any page, they would be already set up and we would save a lot of time. So we will not do that because it would be a bit tedious. So my branding is done. I'm happy with that. Now, the good part is that we will be able to create easier email and web page templates. So now that I'm happy with my branding, let's create a new email. I arrive here where I will see my previous emails and templates that I have gone. So those are all the templates I've done in the past. And I have some starter templates here from which I can start. Let's start from scratch to see exactly how you start without anything. We have here a number of modules, so let's add a title: Netflix example. We have a number of modules that we can choose from here. And I can guarantee you that the list is enriched very often. Otowui will guarantee you that all the modules you use will render very good on all platforms. And if there are some modules that are not great, for instance, Outlook, it will be indicated with this flag. Here where we have an image in the background, plus an image above, plus text above, plus call to action above and Outlook doesn't like that at all. So those two here are to be handled with caution because it may look a bit different in Outlook. Otherwise, the other ones all look great on every platform and all configurations. We'll see that in a preview. So let's start without applying the branding. So if I took this module here, you see that we have a basic logo. And if I took some text and images here, let's use this one. That's nothing special. So let's remove that. Let's apply my Netflix branding and let's come back. Let's do that again. Let's use this view in browser, this first, and you see here I've got my Netflix logo that has been automatically added. Let's put an image on top of that, a simple image here. Here we see that we have an issue with padding, so let's configure this. This section here with more padding at the bottom. Yes, that's better. We could do that on the mobile size also. And we could change that height. We could, here, change again the logo. So this is the default logo but we could have another logo for this page and we have the link automatically applied on the logo, alternative text. Here, if I want to, for instance, shrink a bit the logo, I can do that here. I can remove a bit of padding here. I'm satisfied with that. I could change the menu here. Let's suppose that my marketing ops team asked for a specific logo; so I could change all that here, and I would for that switch to the HTML view, which would be better and more precise. I've got my image. I'm happy with that. Let's add in a text block. But first, the title is missing. Let's imagine we're doing a newsletter. So we want to add three blocks here and we would need a footer. That would be great. It's a very simple footer. That's enough. So I've got my basic email and I can refine, obviously, all the sections clicking on configure here. And you see, I have all those paddings, titles set up here, all paragraphs are setup. And what's great is once you import into Marketo, you keep all those parameters. It's not a fixed template, it's the template plus all the parameters you added in Otowui, so you can go on in Marketo and refine your template. Once I'm happy with my block, and here, obviously the philosophy is not to have too many blocks. As you can create as many templates as you want, you don't want to create a master template with 30 modules because we all know that in Marketo it will be difficult to handle. So you can create very specific templates for specific needs with as few modules as possible so that it's very easy to manipulate in Marketo. If the team wants a new module, you just come back to Otowui had the new and import back to Marketo, it's very easy. So that changes a bit the way you use templates in Marketo. I can preview here the result of my work; I can view on the mobile version. Here I would need to work a bit on that to centre everything on the mobile side. Lastly, to preview. Let's go to this section here. And what would I do, here, for instance, the image is centred o I would have to centre everything. Let's remove the paragraph because I don't need, for instance, the paragraph; I would centre the button. We need to do that for all. Centre the button, centre the title. Tittle, centre, paragraph, remove and button, lets centre right. So I should be happier with that preview on my desktop and mobile version. And that's better. So I could send an example to my team, my boss, whoever. So that's the look at the first draft of the template; are they happy with that? Let's send that. Let's imagine the answer is: "We would like you to put some real images and real text in because it's a bit difficult to imagine everything." So let's first here, on this module, we could change the image. I previously added the hero image from the website. That gives at once a Netflix feeling better. Let's change the padding for this one because I'm not happy with that. That's better. One nice functionality would be here to be able to use an RSS feed to add directly text plus images. So let's save that and go back to my setup and set up the Netflix RSS feed. I think I can do that here. Yeah. So I've got this menu as a feed, and let's create the RSS feed. So I found that here. So obviously you need the URL to do that. Let's create that. And if I preview that, what do I see? I see here images and text and URL for Netflix. So here we have a small issue, but that's not a big problem. Let's come back to my templates. And on this module, let's import feed. Okay. Let's choose this one first. Okay, so the image is replaced, the text is replaced. Is the call to action replaced? Yeah, the call to action is replaced. We need to change the text here with this one. Let's go. Let's do that for the second one: the same, Netflix. Let's just use this image; and on this one, this image. And it helps me save a lot of time because I can give a real Netflix vibe very easily thanks to the RSS feed. So I can then preview and look at the effect. Okay. I'm happy with that. And I can send again a sample to my team or my manager. And it's great. So we have some settings here that we can set up for the all emails, so we can change for this email the default fonts, the background, the email size; you can add a pre-header if you want, and we could use some custom code if needed. I'm not using that, but if you need to insert some code in your email, you could do that here. And then you could publish directly your template to Marketo. Here, in the settings, I have set up my Marketo credentials. The endpoint, client ID, client secrets, the folder URL and the landing page folder URL so that I can push directly my templates to Marketo, so that's pretty great. And one tiny functionality I forgot is the ability within a module to reorder the different elements. So here you can put the text above the title. Or if I use this one, we could decide that this should be on top, then the title, and the text below. So this is another way to personalise the different sections that I really find useful. So now that I have exported to Marketo my template, let's check in Marketo what it looks like. So here in my design studio, I can find my template here. I'll just rename it so that it sticks to my naming convention. We can preview that. I just saw that we had this problem with the images generated from Netflix, it's not a big deal because I suppose that I will have new images. I've created an email based on this template here. So basically I've got all the modules I asked for and I can play with these modules, just like in Marketo: add clone, move them. And within a module, I still have almost all the parameters we set up in Otowui. I can change the logo again; I can change the menu. I have plenty of properties for the logo, the background colour, the padding, the heights. So if you remember, I could shrink the logo in Otowui, I cannot do that here, so I need to change the image if I want to shrink it that's something, for instance, that's not available. Here, on the image, I can change the image; in the background colour, on the text. Remember I could change the order of the of the different section blocks; I cannot do that in Marketo, unfortunately, but I can change here the text for the title, the text, background colour, the padding and so on. And here I can change, obviously the image title, call to action and all the padding, background colour, call to action, label and URL colour, radius. So I've got a lot of parameters I can still play with in Marketo. That's great. It's not a fixed template. So I can fine-tune my email in Marketo and send emails I want. That's great. Let's switch now to the landing pages. So here I'm back in Otowui: in my template menu I will find all the templates I've already done. So here we see the latest email template we just did. If we click here on new page, it takes some time to load, but basically we arrive on this menu here where I will see again all the previous landing page templates I've created in the past, and we have a number of starter templates we can play with. I will start from scratch again and it's the same principle. A number of modules on the tab on the on the left-hand side here. And honestly, I think the number of modules has doubled since I used Otowui last year. Again, I can add a module here and if I don't apply the branding, it will be the Otowui default colour, the grey. Let's apply the Netflix branding first and let's add some menus. So here we have the colour, the logos that are already done, and that's great. For each section I can here play with the backgrounds. Remember that for the email we just added a colour. So you can add a colour, a gradient, an image, a video, parralax and a YouTube video. So that's great. For instance, here we could add a video. So we can give a video in different formats here. So that's great. Or we could specify a gradient. I didn't play a lot with gradient, I have to play with that to see exactly how it works, but I think there are a lot of options. Image is basically what you expect from an image with some options to repeat, no repeat; how the image repeats, to scroll ot not? Position. So that's a pretty usual set-up for an image on a web page. We can have a divider. The divider is how will appear the bottom line, I think. So we have wave on the bottom, for instance. Here we have this wave appearing. We could create something special with this section. That's ugly! It's just to show what we have. So we could play with that. We don't want to use the divider for the moment. We could animate. On all the section we can animate pretty much everything. The divider is still here, let's remove the divider. We could animate the logo and the call to action, there are a number of options. I didn't have the time to explore all the options yet. We could add a rotation just like in PowerPoint. That's not something maybe you want to do but it's possible to do that. What do we have? Size, so the padding on mobile and desktop. Not great things here. How do we align? We can create an anchor to directly go to a certain section of the page. What is wrap items? I'm not sure of that. We will encapsulate the items. So we want to put a slight transparency background. Okay, that's a good option. A small shadow, plenty of options. So where is the logo, text, link; the menu. So menu is not appearing here, but it's here. Again, the font, the size, the colour, plenty of things. That's great. We could wrap again. We could wrap into the wrap. Let's not do that. And we could animate again the menu. All right. So there's an animation on the container and on the content. We could do pretty much what we want. Let's add some more modules. Again, it's set up with the Netflix branding, which we set up. We can move the blocks within a section, again. That's great. We have pretty much all the options we saw, with the container and the content. So you can set up exactly how you want your page. What do we have here? Let's remove this one. I want, for instance, a the countdown, because the new TV show I want to promote will be available at the end of the month. So let's imagine, I want to use the countdown here; I just have to specify dates. Let's set the dates, they will be now and at the end of the month. Okay. I can change the time zone; I can change how it displays. That's great. That's great. I love that. What else do we have? Titles, so pretty much normal here. Okay. I think we've seen a lot of options. You've seen that you have still a lot of options. Let's just put a call to action here below. We still have the RSS feed on this one. So you have the small button here, a small icon, that tells you that there are RSS feeds available for this module. So again, here we could say go and fetch some… So here Netflix, and we could choose directly Image plus text plus call to action. That's great. And when do we have? We have Twitter. Let's remove that, it would be easier to manipulate if we remove that. We may want to add a Marketo form, obviously on the landing page, that's one of the key elements. So this is where you will be able to add a Marketo form, with this symbol here that indicates that you will be able to add a Marketo form. So let's remove the title because we don't want that. Let's remove the paragraph. And we have connector here. So here we can say I want to create a Marketo form placeholder. It's also available for any custom code you have, or part of the form. I think it's regulary enriching. So here, when I will export these templates to my Marketo, I will be able to put a form here, it could be a form placeholder. I could also play with that and directly fetch into Marketo one of my forms. Let's be crazy and do that. I'm not sure what it looks like. This one is very simple. It's okay. Let's get the code, copy text, and go back to… Let's put this and preview the modification. Okay. We have our Marketo form exactly as I defined in my Marketo. So here the Marketo CSS is applied. We'll see that there is a parameter to apply the template CSS on the Marketo form and to remove the Marketo form default CSS. That would be, I think, better. Let's check on my mobile version. What does it look like? Oh, yeah. Small animation here. Okay. A second way to add a Marketo form would be to use the call to action and have the Marketo form to pop up. Let's add a default call to action section. This one. Okay. But here we could say, we can have a link on the button. We can have a pop up. An anchor will basically push you to one of the sections of your page, for instance, to go below and to directly go to the Marketo form I put below. But here I could say pop up and I could add again my Marketo form here. Contents would be a Marketo placeholder. Or I could directly put my Marketo placeholder; I will have to indicate the Marketo form when I am in Marketo, or I could use the custom code here if I want to test what does it looks like. Okay, let's try that; that's crazy. Let's preview. In Marketo, there are two types of code you can get from a form. I'm not sure if we need to indicate… no it's working. Oh yes, because I put two forms on my page, which is not recommended; you should not put two forms on a page. Marketo doesn't like to you to add two forms on the page. It could be done, but you need to create some specific code within the form to tell Marketo that there are two forms on a page. It works, you see. If I remove the form at the bottom of the page, let's preview again. And now I just have one. So you see the principle. I've got plenty of modules. Create my page as I want. Just put Netflix options. In the settings, I have many more settings as usual, I can create… Global settings are especially useful for the SEO here. I would say if I'm creating a page in English or in French; if my page is read from the left or from the right, if I want to create a page in Hebrew that would be great; if I want to create some custom CSS. So for instance, that would be if we have special demands regarding the form where we wants to, for instance, after each time, once all the fields in the form are filled out, we would like to have a green light, or green line around the label or the fields; and if we detect that, for instance, a field is wrongly filled out, we could have a red light. So that would be done within the custom CSS placeholder here. If we want to add a special behaviour on the form, we could do that here. For instance, if we have a field company name, we may want to interrogate an open data database. We have that in France that contains all the companies of France. So that's when you type the beginning of your company, if I type Merlin, I will have all the French companies beginning with Merlin, and I would be able to choose mine. So that's how we correctly write the company name. And I will enrich directly my form with the address, turnover, industry, whatever information the database has. In the custom HTML, we could add some HTML; I don't have any examples here but you could do that here. Global styles, we have again all the parameters. Some parameters for the Global style. We have the metatags here, so we could add a dedicated favicon, or we could have keywords. If this were a useful description, that would be great for the SEO. Language. So plenty of properties and we have Marketo form options. So here I could say reset the form font style; yes please. We have some specific layouts for the form I will put on my page. Sorry, I did something very stupid, I refreshed my page in Firefox without having saved first, so I had to quickly recreate the page Because I would like to export all that into Marketo. So I've put my header again, the Marketo placeholder so that we can test the insert of the Marketo form; the countdown, the RSS feed on the three blocks, and a simple footer. Let's try that. So we've seen what we had in settings. That's okay. And I want to publish again, here, I will be able to push everything into Marketo. Let's switch to Marketo now. So now that I have imported into Marketo; I've imported my Netflix example here as a template so I can preview that. We see that everything is working. We don't have the image issue here. That's great. I've just created a landing page based on this template, which is here. I find all the elements here I have prepared. So the logo, the text, navigation, CTA, whatever. I have replaced my form placeholder with the same test form I used; so I have my form here; I forgot to centre that into Marketo. I can change all the CTA, texts. Everything as usual. And I've got number variables here for the padding, the colours, the background colours that I can use; the video URL. So I've got plenty of things. One thing I forgot to do is to rename the section in Otowui so that we have clear names for this section. That's something I could do in Otowui; I forget to do that. We have our landing page which contains all the modules I want; that's great; and with which I can work correctly; that's great. If I test the page here. Okay. I've got the animation, the form. We see here that the CSS of the page has replaced the Marketo form; that's great. That's something that didn't test; it's working. The countdown is here. Call to action here I can directly go to… I forgot to replace that. And so I'm pretty much happy, that's what I wanted. So regarding the pricing of these wonderful solutions, it's quite easy. You have two packages: the email builder and the web page builder, each 3,900 euros per year. If you take both, it comes down to 7,200 euros per year. No other costs per user. No other costs per template created. So as many users as you wish, as many templates as you wish for the same price, whether you are a multinational or a simple company. Usually Charles from Otowui helps you get your first templates done; he is very helpful. You have also support included; very reactive; you get tickets here. You can create tickets if you need anything and Charles usually answers in a day, so that's really great. Should you want any information on Otowui, you can either contact me or Charles directly on LinkedIn: Charles Thiery; say that you come on my behalf and you can get in touch with him directly. Have a good day. I hope you will try Otowui.