ABBYY FlexiCapture Video – Web Station Customization

Watch our video in order to learn how to customize the ABBYY FlexiCapture web stations to make them unique to your company.

Hello. Today, I’d like to show you how we can customize the ABBYY FlexiCapture web stations, to make them, frankly, our own. We have the ability to change logos, and the skin of the actual web station, just to give it our own little flavor if we wanted.

The first thing I will note is that when you navigate to a custom station, you’ll notice a special URL. It would most likely contain this “/custom” at the end of it, and that is what triggers the software to know that we’re dealing in a custom working skin and functioning application here. Now, that skin is controlled through the installation of these web application files. Now, what I would like to show you is how we can tweak some things here.

When we’re in this custom content folder, you can see this is where the software stores things like JavaScript or its icon files, and those sorts of things. So, you can see that that’s where we have some default files. I’ve also put my own files here, that we will then reference. But beside this, we have an actual view of the software, and you can see, within here, we have a document called “index.cshtml”. When I open that, you can see that I have all kinds of access to change the way the software’s view is. So for example, if I wanted to modify the page name, I can put whatever page name I wanted. I may call this our UFC’s Customized Page, and then once I save that, and I go refresh the page, then you will see that now, my customized page text is there as well.

I may want to reference things like the icon file, or maybe even this logo, so actually, I’m going to change that with you here on this video, so that we can see it and how it works together. If you recall, I’m going to go back to our custom content location, and I’m going to change the icon file, because we have our own custom one, and what I will do is I’m just going to modify the view to reference that icon file. And I’m going to save it, so now when I refresh the page, you will see this icon at the top transfer to my own custom one. And you can see there, now not only is it titled differently, but I have my own favicon as well.

The next thing I’m going to do, and the last thing we’ll do for this video, is modify the logo, and we can actually put our own in place. What I’m going to do is go back to our HTML, and I’m just going to change the name of the logo. Okay, now when I do that, I can go back to my page and refresh. Now you can see that this header part has grown maybe a little bit, so what we have the ability to do is then go modify the skin using our custom CSS file. And when we do that, we can look maybe for the header, and we can change the height. So I may want to make that 75 pixels, and there you go. We can now see my full logo. In fact, I may even bump that up to 85, give me a little bit of room there, and now I can have access to my full logo.

So, that’s an example of how we customize the solution. Now of course, you can be creative. You can change colors and buttons. You also have the ability to modify what is executed on certain scripting functions, using this custom.js or this JavaScript file. This is a great way to customize the solution easily, and give it your own feel, and enjoy it, and enjoy the full breadth of the ABBYY FlexiCapture solution here. So, I hope you enjoyed this video. If you have any questions, feel free to reach out to us. Thank you so much.

Leave a Comment