The VBC - The Virtual Business Card

    uses cookies to personalize your experience and make our site easier for you to use.

    We do also share that information with third parties for analytics.

    I got it &

    Dont show me this

    Bubble anymore

    or

     

    The VBC - The Virtual Business Card

    uses cookies to personalize your experience and make our site easier for you to use.

    We do also share that information with third parties for analytics.

    How to create your Animated Virtual Business Card?

    We are proud to introduce to you the first animated Virtual Business Card app ever!

    I have been dreaming of this moment since I started my first company in 2008 called Personal Golf Holidays, which has as its logo the earth in the shape of a golf ball with an arrow wrapped around it to give it a feeling of movement and an energetic image of the company.


    I would have liked to have had the golf ball spinning on its axis like the earth and the arrow wrapping around it like a victorious arm during a magnificent approach that ended in this damn little hole! but it was not possible!

    Since then, technology has evolved and over the years more and more companies have also wanted to create animated logos and/or short animations that convey a more targeted message in order to increase their visual impact!


    NOW IT'S POSSIBLE THANKS TO THE VBC - THE VIRTUAL BUSINESS CARD!

    If you do not know how to code and you want to have a standard Virtual Business Card or an animated Virtual Business Card, you can send us here the original design of your business card with a precise description of your needs, and we will quickly inform you of the price to code your Virtual Business Card.




    You Know How to Code?

    You know how to code
    It's easy, start by considering some important information before you begin, a
    t the moment, you can code your Virtual Business Card using :

    HTML, CSS internal and external JS

    At the moment it is not possible to use :

    Html : Html Preprocessor ( Haml, Markdown, Slim, Pug ).
    Ajouter des Class(es) to <html>.
    Stuff for <head>.

    CSS : CSS Preprocessor ( Less, SCSS, Sass, Stylus, PostCSS ).
    CSS Base ( Normalize, Reset, Neither ).
    Vendor Prefixing ( Autoprefixer, Prefixfree, Neither )

    JS : JavaScript Preprocessor ( Babel, TypeScript, CoffeScript, LiveScript ).
    Adding an External Links


    Files Dimensions & sizes

    Virtual Business Card

    Size & Ratio : min. 345 x 220px
    max. 1725 x 1100px
    Weight : max. 15Mb

    Files, Shapes, pics, etc...

    Format : Jpeg, Png, Svg, Gif
    Numbers of files : Unlimited
    Library size : 10Mb




    Add Shapes or Images

    How to create an Animated Virtual Business Card

    If you do not create your shapes by encoding them, you must upload them to our library, then paste the links into your code.

    Once your elements are uploaded, you just have to select your shape or peak to copy the link to paste in your code.


    IMPORTANT : The VBC - The Virtual Business Card adds your VBC Recto ScreenShot to your invitations that you will send so that the people who receive it will see your profile picture as well as below your Virtual Business Card. To do this, it is essential to upload your images, icons, etc... on our server.

    IMPORTANT : If you have an animation on your VBC and you want the people whith who you shared your VBC can see it when they will open your invitation, you will need to create a GIF of your Virtual Business Card and upload it as your Screen Shot.
    You should created it before coding your VBC as you will need to upload it at the end of your VBC creation process.
    Here our tutorial : How to create a GIF of your VBC?

    Adding external elements

    You can call through external links fonts, icons, images, etc...

    The links to images, icons, etc... placed in your code will be visible on your screenshot.




    How to create a Virtual Business Card Animated VBCIn order for your prospects, clients to interact with your Virtual Business Card by tapping on links or icons. please follow these instructions. Some basic Html


    Phone, Mobile or Fax N°

    Tap on the Phone Number to make a call.
    href=“Tel : +41 79 855 40 88“>41798554088</a>
    or
    href=“Tel : +41798554088“>41798554088</a>

    Tap on an icon to make a call
    <a target=“_blank"href=“Tel : +41 79 855 40 88“>41798554088</a><img src=“https://vbc.app/uploads/my_phone_icon.png“></a>


    Email
    Tap on the on the mail address to open mail.
    <a target="_blank" href=“your_name@gmail.com“>your_name@gmail.com</a>
    <a target=“_blank “

    Tap on an icon to open mail.
    <a target=“_blank"href=“your_name@gmail.com“>your_name@gmail.com><img src="https://vbc.app/uploads/my_mail_icon.png"></a>


    Map
    Open your address in our map.
    To display correctly your address in The Virtual Business Card, you will need to copy the code that will generate for you.
    1. After chooing to create a Pro VBC, add the address that will be show on the map ( actually you can show only one, soon two )
    2. Then choose the icon “ </> “ You know how to code?
    3. Simply copy and paste these few lines into your code. 
    <div class="address"> <span>Au Village 28b</span> <span>Soubey</span> <span>2887</span> <span>Suisse</span> </div>

    Tap on an icon to open the map.
    <a target="_blank"href=“maps.google.com/?ll=38.882147,-76.99017“><img src=“https://vbc.app/uploads/my_map_icon.png“></a>


    Website and other links
    Your website showing the URL.
    href =“https://your_ website.com“

    Your website without showing the url - for i.e : Check out my Site! - VBC.APP - etc...

    <a target="_blank" href=“https://vbc.app/“>VBC.APP</a>
    <a target=“_blank “

    Tap on an icon to open your website.
    <a target="_blank" href="https://vbc.app/"><img src=“https://vbc.app/uploads/my_website_icon.png“></a>


    Social network
    Showing the URL of the social network i.e : Facebook.
    href =“https://www.facebook.com/TheVirtualBusinessCard/

    Tap on an icon to open your social media page.

    <a target="_blank" href="/https://www.facebook.com/TheVirtualBusinessCard/"><img src=“ https://vbc.app/uploads/Facebook_icon.png"></a>


    Note : You can call the icons also by using CSS



    Animation : code of conduct

    How to create a Virtual Business Card Golden Rules
    Before you start your animation, note that an animation can disturb the user if it is too present or if there is not a pause at the end of your message!

    Use animation to highlight your message and not to make your customers suffer from an epilepsy seizure! 🥴


    After that, only your imagination and your coding skills will be the limit!



    Start creating your Animated VBC
    How to create your animated virtual business card Animated VBC


    Follow the creation steps until the screen where you can choose what kind of VBC you like to create, there you have to choose the Pro VBC, name your Virtual Business Card and save it. On the next screen you can choose the way you like to create you VBC, from there choose the icon </> You Know How to Code?.

    Recto animated VBC
    1. Copy and paste your code or directly write your code directly on the spot.

    2. After choosing the icon to paste your code, select the appropriate tab ( Html, Css or Js) to paste your code, then type into the coding space and the cursor will display, then simply paste your code.

    3. To add the link of an image or icon that is in your library, go to it and simply press it to copy the link and paste it into your code

    4. Repeat this step for the other tabs.


    Note : 
    To quickly delete all your code, go to the bottom center menu and press the button “ erase my Html code ", “ erase my CSS code " or “  erase my Js code “.

    1. Once these steps are done and you are satisfied, press the save button at the bottom right.


    The best is to upload the design of your VBC with or without animation at the end of the process.

    Accept file : jpg, png gif

    1. Take a ScreenShot of Your VBC when you want people to discover it on their invitations or upload a peak of your VBC so that it can be taken when you want!

    2. It's time to create the Verso of your VBC if you have one, or press the button at the bottom left of the screen for " I don't have a Verso “.




    Verso

    1. Do the same steps as for the Recto and everything will be fine ;)

    2. After saving your VBC, you will be directed to the next step in creating your profile.




    Good luck in the creation of your new Animated Virtual Business Card, I can't wait to see what you gonna create! see you soon!




    The VBC The Virtual Business Card2x




    I like to have more fresh news about the VBC through the newsletter.

    The VBC - The Virtual Business Cards

    PGH Sarl

    Au Village 28b

    2887 Soubey - JU

    Switzerland

    Get in Touch @