Free Bootstrap Builder for Templates & Themes

Getting started

In Startup we're using Bootstrap v.4.3 with a huge amount of additional classes, that will help you create layouts quickly and minimize using CSS styles.

Preview, Export project, create a randomized layout, delete or refresh project

First of all, go to the generator app, drag and drop some blocks from a left panel to a central working area, or simply choose a number of blocks that you want to have in your project and click "Generate" button - it will create a page generated from randomly chosen blocks. This will be a good starting point with.

After at least one block is chosen, you can preview your project (click on the "Preview" button) or export it ("Export" button).

You can delete the project using a button with a "Trash" icon.

Note that if you don't purchase Startup only the free blocks layout will be shown and exported!
Other blocks will be replaced to preview images and cannot be changed or customized!

Use presets

We've made 6 predefined design styles to show you all the power of the Startup generator. Simply choose some of them in the "Apply preset" block and it will dramatically change the style of the whole page!

Change Fonts

We use Google Fonts - "DM Sans" font family by default. It can be simply changed in the "Typography" block of our generator app:

First of all, choose the subset in the top-right corner (if you need to use not Latin subset). After that, you can choose your main font ("Body") and font for headings ("Heading"). Also, you can choose the font-weight of both of them.

But if you want to change your font manually, you can simply replace

<link href="https://fonts.googleapis.com/css?family=DM+Sans:100,200,300,400,600,700,800,900" rel="stylesheet">

in your <head></head> section to your new link from Google Fonts.

If you want to use a not Latin subset, add to the end of URL above &subset=cyrillic-ext. E.g. for the Cyrillic subset it will be:

<link href="https://fonts.googleapis.com/css?family=PT+Sans:200,300,400,600,700,800,900|Open+Sans:200,300,400,600,700,800,900&subset=cyrillic-ext" rel="stylesheet">

After that, replace the old font with a new one in /css/framework.css and /css/style.css:
"DM Sans" -> "Open Sans" "DM Sans" -> "PT Sans"

or if you use SCSS, replace the variables value in /scss/variables.scss:
$font_heading: DM Sans; $font_main: DM Sans;

Change colors

You can change the colors of all elements in our generator. Just go to the "Color palette" block and change them!

First-row, "Action": set colors of buttons and links (there are 3 possible styles of these elements).
Second-row, "Basic": set colors of texts. There are 4 settings, left to right:

The main color - set the default color to all elements;
The heading color - set the color of headings and text that should draw the reader’s attention;
The white color - set the color to all texts on a dark background (so they should be light);
The gray color - set the color of other elements: borders, dividers etc.

Third-row, "Background": set colors of dark (1st option) and light (2nd option) backgrounds.

Also, you can click on the "Random" button and for a unique color scheme istantly!

Set animations

You can set on-scroll animations for your project in 2 clicks!

Go to the "Animation" block and set the toggle in the top-right corner to "on". It will enable animations in your project.
After that, you can choose animation speed (0 is the slowest and 10 is the fastest) and one of three styles: Fade Down, Fade Up, Zoom In.

There's more information about setting animations here.

Change Images

Startup uses 2 versions of images - regular and 2x for high-resolution retina displays. So don't forget about it, when you change images. If you don't want to use 2x images, remove srcset="..." attribute from <img> tag:

<img srcset="i/image@2x.png 2x" src="i/image.png" alt="" />

Full classes guide

Important note!
Startup supports all Bootstrap 4 classes, so you can check Bootstrap 4 documentation here.
We've extended some of the Bootstrap classes and added some new ones.

Width and Height

w-XX
Sets width:XXpx; CSS property where XX - the value in pixels with 10px step.
The value range is 10-1170.
Also possible to use w-1 - w-10 classes
to set width:1px; - width:10px; Show example

<div class="w-400 h-80"></div>

mw-XX
Sets max-width:XXpx; CSS property where XX - the value in pixels with 10px step.
The value range is 10-1170. Show example

<div class="mw-700 h-80"></div>

w-full
Sets width:100%; CSS property. Show example

Div is 100% wide even it has w-200 class

<div class="w-200 w-full h-80"></div>

mw-full
Sets max-width:100%; CSS property. Show example

<div class="w-600 mw-full h-80"></div>

h-XX
Sets height:XXpx; CSS property where XX - the value in pixels with 10px step.
The value range is 10-1170.
Also possible to use h-1 - h-10 classes
to set height:1px; - height:10px; Show example

<div class="w-400 h-80"></div>

mh-XX
Sets max-height:XXpx; CSS property where XX - the value in pixels with 10px step.
The value range is 10-1170. Show example

<div class="w-800 pt-5 pb-5 mh-100"></div>

h-full
Sets height:100%; CSS property. Show example

Parent block has 70px height.

<div class="w-400 h-full"></div>

mh-full
Sets max-height:100%; CSS property. Show example

Parent block has 70px height.

<div class="w-400 mh-full"></div>

Margins

We've extended Bootstrap's mt-4 type classes to make positioning of elements much easier and more flexible.
Now the value can range from 5px to 1000px (not rem as it used to be in Bootstrap).

ml-XX
Sets margin-left:XXpx; CSS property where XX - the value in pixels with 5px step.
The value range is 5-1000. Show example

<div class="ml-50"></div>

mr-XX
Sets margin-right:XXpx; CSS property where XX - the value in pixels with 5px step.
The value range is 5-1000. Show example

<div class="mr-50"></div>

mt-XX
Sets margin-top:XXpx; CSS property where XX - the value in pixels with 5px step.
The value range is 5-1000. Show example

Some div above

<div class="mt-30"></div>

mb-XX
Sets margin-bottom:XXpx; CSS property where XX - the value in pixels with 5px step.
The value range is 5-1000. Show example

<div class="mb-30"></div>

Some div below

mx-XX
Sets margin-left:XXpx; margin-right:XXpx; CSS properties where XX - the value in pixels with 5px step.
The value range is 5-1000. Show example

<div class="mx-50"></div>

mx-auto (Bootstrap's original class)
Sets margin-left:auto; margin-right:auto; CSS properties. Show example

<div class="mw-500 mx-auto"></div>

Paddings

We've extended Bootstrap's pt-4 type classes to make paddings much flexible.
Now the value can range from 5px to 1000px (not rem as it used to be in Bootstrap).
You can still use pX-[0...5] Bootstrap's classes - they do not affect any other element.

pl-XX
Sets padding-left:XXpx; CSS property where XX - the value in pixels with 5px step.
The value range is 5-1000. Show example

Parent div got pl-50 class

pr-XX
Sets padding-right:XXpx; CSS property where XX - the value in pixels with 5px step.
The value range is 5-1000. Show example

Parent div got pr-50 class

pt-XX
Sets padding-top:XXpx; CSS property where XX - the value in pixels with 5px step.
The value range is 5-1000. Show example

Parent div got pt-30 class

pb-XX
Sets padding-bottom:XXpx; CSS property where XX - the value in pixels with 5px step.
The value range is 5-1000. Show example

Parent div got pb-30 class

px-XX
Sets padding-left:XXpx; padding-right:XXpx; CSS properties where XX - the value in pixels with 5px step.
The value range is 5-1000. Show example

Parent div got px-50 class

Font styling

f-XX
Sets font-size:XXpx;line-height:(XX+10)px; CSS properties where XX - the value in pixels with 2px step. The value range is 12-102. Show example

This div got f-22 class

lh-XX
Sets line-height:XXpx; CSS property where XX - the value in pixels with 2px step. The value range is 12-202. Show example

This div got f-22 and lh-150 classes

f-main
Sets font-family:$font_main; CSS property. Used to set base font-family for the page. Show example

This div got f-main class

f-heading
Sets font-family:$font_heading; CSS property. Used to set another font for some elements, mostly for headings. Show example

This div got f-heading class

underline
Sets text-decoration:underline; CSS property. Show example

This link got underline class

Different font-weight. If your font doesn't support the chosen font-weight, it will be changed to the closest.
The possible values:

thin - sets font-weight:100; CSS property.
extralight - sets font-weight:200; CSS property.
light - sets font-weight:300; CSS property.
regular - sets font-weight:400; CSS property.
medium - sets font-weight:500; CSS property.
semibold - sets font-weight:600; CSS property.
bold - sets font-weight:700; CSS property.
extrabold - sets font-weight:800; CSS property.
heavy - sets font-weight:900; CSS property. Show example

This div got thin class

This div got extralight class

This div got light class

This div got regular class

This div got medium class

This div got semibold class

This div got bold class

This div got extrabold class

This div got heavy class

sp-XX
Sets letter-spacing:(XX/10)px; CSS property where XX - the value in pixels. The value can be: 10, 15, 20, 25. Show example

Text with sp-10 class
Text with sp-15 class
Text with sp-20 class
Text with sp-25 class

op-XX
Sets opacity:(XX/10); CSS property where XX - the value with step 1. The value range is 0-10. Show example

10

9

8

7

6

5

4

3

2

1

0

Colors

Note that the color of each class is set through our generator app.

Text colors
You can add a class with the name of the text color, that you want to set.
List of available colors (sorting the same as in the generator app):

action-1
action-2
action-3
color-main
color-heading
color-white
color-gray
color-bg-light
color-bg-dark

also, there are a few colors that do not change through the generator app, but you can use them too:

color-transparent-white
color-red
color-twitter
color-facebook
color-dribbble

Background colors
There are 2 colors that can be changed through the generator app:

bg-dark
bg-light

also, you can use all colors that pre-defined for texts:

bg-action-1
bg-action-2
bg-action-3
bg-main
bg-heading
bg-white
bg-gray

Border radiuses

radiusXX
Sets border-radius:XXpx; CSS property where XX - the value in pixels with 2px step. The value range is 4-32. Show example

This div got radius12 class

radius_full
Sets border-radius:50%; CSS property. Show example

h-200 w-200 radius_full

noradius, noradius_top, noradius_right, noradius_bottom, noradius_left
Sets border-radius:0; CSS property of chosen corners.

Positioning elements

relative
Sets position:relative; CSS property.

absolute
Sets position:absolute; CSS property.

Full elements guide

Buttons

To create a button use the btn class.

Available Properties

Size of a button
Can be sm | md | lg | xl.
Use it with your btn class: <a href="#" class="btn action-2 sm">text</a>

Examples:

xl lg md sm

radiusXX
Sets border-radius:XXpx; CSS property where XX - the value in pixels with 2px step. The value range is 4-32.
It can also be: noradius, noradius_top, noradius_right, noradius_bottom, noradius_left

Examples:

radius4 radius12

radius20 radius30

noradius_top noradius_bottom

noradius_right noradius_left

noradius

Color Name
Sets color of a button. Can be:

action-1
action-2
action-3
action-white
action-bg-light
action-main
action-heading
action-gray
action-bg-dark
action-red
action-facebook
action-twitter
action-dribbble

If You want to use "transparent" colors, you should also add class border-[COLOR_NAME]

action-1 action-2 action-3 action-main action-heading action-gray action-bg-dark action-red

action-facebook action-twitter action-dribbble border-main border-heading border-gray border-transparent-main

action-white action-bg-light border-white border-transparent-white

Links

To create a link use link class with your <a> tag.
This class used to be able to set color and hover color for links.
* Note: Always set a "href" attribute to all <a></a> tags for correct displaying.

Full list of available colors:

Also, it may be useful to use an underline class with links: action-3 and underline

Inputs

To create input use the input class with your <input> tag.

Available Properties

Height of input
Can be sm | md | lg.

All inputs also have w-240, border-action-1, text-center classes:

radiusXX
Works the same as button radius

Text color
Works the same as text color

border-[color_name]
Sets the color of an input's border. All possible options:

focus-[color_name]
Sets the color of an input's border on focus. All possible options:

placeholder-[color_name]
Sets the color of an input's placeholder. All possible options:

Selects

To create selects use the input class with your <select> tag.

Available Properties

All properties are the same as inputs.
You can add color-white class to make the select arrow white.

Textareas

To create textarea use the input class with your <textarea> tag.

Available Properties

All properties are the same as inputs.
Simply add h-XX class to change the height of the textarea.

Checkboxes, Radio-buttons

To create checkbox or group of radio-buttons, use this code:

Checkbox

<input type="checkbox" name="SOME_NAME" class="d-none" id="UNIQUE_ID" /> <label for="UNIQUE_ID">Some text</label>

Note that UNIQUE_ID must be unique for the whole page!

Group of radio-buttons

<input type="radio" name="SOME_NAME" class="d-none" id="UNIQUE_ID_1" value="1" /> <label for="UNIQUE_ID_1">This radio set value to 1</label> <input type="radio" name="SOME_NAME" class="d-none" id="UNIQUE_ID_2" value="2" /> <label for="UNIQUE_ID_2">This radio set value to 2</label>

Note that all ids must be unique for the whole page!

Available Properties

All properties are the same as inputs.
Examples:

border-action-1 focus-action-2

border-action-2 focus-action-3

border-action-3 focus-action-1

border-main focus-heading

border-heading focus-dark

border-gray focus-main

border-dark focus-gray

border-light focus-action-3

border-white focus-action-1

border-transparent-white focus-white

Radio 1 Radio 2 Radio 3

Color filters for background images

You can add light or dark color filter to any element that has a background image. Simply add color-filter-[type]-[intensity] class to your element.

Available Properties

Filter type
It can be dark (puts an overlay over your image that has a bg_dark color) or light (puts an overlay over your image that has a bg_light color).

Filter intensity
The value range is 1-9. The higher value gives a stronger filter effect.

Example:

color-filter-dark-5

Original

color-filter-light-5

Show more examples

color-filter-dark-1

Original

color-filter-light-1

color-filter-dark-2

Original

color-filter-light-2

color-filter-dark-3

Original

color-filter-light-3

color-filter-dark-4

Original

color-filter-light-4

color-filter-dark-5

Original

color-filter-light-5

color-filter-dark-6

Original

color-filter-light-6

color-filter-dark-7

Original

color-filter-light-7

color-filter-dark-8

Original

color-filter-light-8

color-filter-dark-9

Original

color-filter-light-9

Sticky Navigation

By default, all navigations are static. If you want to make your navigation sticky (it will stick to the top of the browser window and always be visible while scrolling the page) - simply add fixed-top bootstrap's class to your <nav> tag.

Code example:

<nav class="navigation_1 bg-light pt-30 pb-30 text-center fixed-top"> <div class="container px-xl-0"> This nav will stick to the top! </div> </nav>

Receive data from forms

* Note: your hosting must support PHP and php mail() function to receive emails from our script.

We included a PHP script that allows you to receive data from any form of your project to your email.
All you need to do is open form-handler.php in the root of your exported archive and set your email:
$to = "my@email.com";
Also, we recommend setting your "From" email address - it will be better if it will be on the same domain that your website.
$from_email = "robot@domain.com";

Telegram integration

* Note: your hosting must support PHP to make this integration.

You can receive data from your page forms directly to your Telegram app (on your phone or desktop).
This method is preferable to receiving data via email because:

It's free
You'll be notified immediately
The message will not be flagged as a "spam"
Most of the hostings have a small quota on sending emails

To set integration with Telegram messenger you have to follow 4 simple steps:

Create Telegram bot, get access token

The easiest way to do that is to find bot @BotFather and send a message to him. This is a bot made for creating new bots in Telegram :)

Press the "Start" button. You'll see the list of available commands.
We need to create a new bot, so type the "/newbot" command.

BotFather will ask you: what are you going to call your bot? That's the shown name, you'll see it later in your contacts list. Enter a name.

After that, BotFather will ask you to set the username of your bot, which must end in "bot". Enter some "unique_name_bot" username. In our example, it's "StartupTelegramTestBot"

If a username is not already in use, BotFather will create a new bot for you.
Also, it will show your token to access HTML API. Save this string and we're ready for the next step.
Send a message to the bot

Now you've got your telegram bot. In this step, you need to send it a message with any text. To do so, find your bot in the search panel or just open the link https://t.me/YourBotUsername (in our example it'll be "https://t.me/StartupTelegramTestBot") and write any message to it.
Get Chat ID

Now you need to get an ID of chat between you and your bot.

Open this link in your browser on PC:
https://api.telegram.org/botYOUR_BOT_TOKEN_FROM_BOTFATHER/getUpdates
replacing YOUR_BOT_TOKEN_FROM_BOTFATHER to your token from step 1.
So, in our example it'll be:
https://api.telegram.org/bot1029844219:AAEBrZDqVPx84yTI4-pNDrSKw0l4IknA2OM/getUpdates

You'll see a list of chats with your bot (if you don't see the list, just send one more message to your bot and refresh this page). The last chat should be a chat with your telegram account. Open it and you'll see the "chat - id" value.
In our example, it's "436108089".
Save this and go to the next, last step.
Set Token and Chat ID in the form-handler.php

You've got a token and chat id - that's all the settings we need. Now open the form-handler.php file in the root of your exported archive from our Generator app in any text editor.
Put your token and chat id in this file:

$telegramToken = 'PUT_YOUR_TOKEN_HERE';

$telegramChatId ='PUT_YOUR_CHAT_ID_HERE';

Upload this file to your website and we're done!

You can fill any form on your website and you'll receive data from it directly in the Telegram app.

Viber integration

* Note: your hosting must support PHP to make this integration.

* Note: your website must have an SSL certificate (should be available to open using "https:// protocol") and your SSL certificate must be not self-signed to make this integration.

You can receive data from your page forms directly to your Viber app (on your phone or desktop).
This method is preferable to receiving data via email because:

It's free
You'll be notified immediately
The message will not be flagged as a "spam"
Most of the hostings have a small quota on sending emails

To set integration with Viber messenger you have to follow these steps:

Create Viber bot, get access token

First, you need to have a Viber account. If you haven't, install the "Viber" app from Google Play Market or App Store and follow instructions in the Viber app.

Next, we need to create a Viber bot.
Open this link, Log in, fill all the fields in the form and click the "Create" button. You'll see a popup with your bot private token. Copy it.

Open form-handler.php file in the root of your exported archive from our Generator app in any text editor.
Put your token in this file:

$viberToken = 'PUT_YOUR_TOKEN_HERE';

Upload this file to your website and go to step 2.
Set up webhook

Now you need to set up a webhook for your bot. Webhook is a code that receives a callback from Viber bot and makes some actions, depending on received data.

But don't be scared, we already include all the necessary code in the form-handler.php file!

All you need to do is open any page of your website built with Startup Generator and containing any form. Just fill out the form and submit it. You'll see notification popup with the following text:
Viber webhook successfully set! Now you need to subscribe to your Viber bot and send it a message. Check more info here.
Done!

* Important Note: you may notice that after setting webhook it's been created viberWebHook.txt and viberUserID.txt in the same directory where your form-handler.php file is. Do not remove them! Otherwise, you'll need to set up Viber again!
Subscribe to your bot

Now you need to subscribe to your bot to receive messages from it.
Open the Viber app on your phone, tap on the "More" icon, scroll down and tap on the "Discover" section. You'll see your bot.

Open it and you'll see that it's not published. Tap on the "Publish" button and then to the "Message" icon. You'll see a chat with your bot. Just send any message and you'll be subscribed to your bot. Your bot will send messages to the first subscribed user.

We're done! Just check that everything works correctly. Fill any form on your Startup built page, submit it and you'll get a message with data from this form from the Viber bot!

MailChimp integration

You can send your clients contacts directly to MailChimp and subscribe them to your newsletter using our API integration.

* Note: your hosting must support PHP to make this integration.

All you need to do is:

Go to the https://admin.mailchimp.com/account/api/ and create an API key:

For more info check the MailChimp's help page.
Go to your "Lists" folder: https://admin.mailchimp.com/lists/.
Then choose the list where your subscribers will be added to, click to "Settings" tab in dropdown near the list name:

Scroll down the page and copy your "Unique id for audience {your_list_name}" field:

This is your list ID.
Put your API key and list ID to your form-handler.php file in the root of your exported archive:

$MailChimpAPIkey = 'PUT_YOUR_API_KEY_HERE';

$MailChimpListID = 'PUT_YOUR_LIST_ID_HERE';

That's it! Now all contacts from forms will be added to the chosen list in MailChimp.

SendInBlue integration

You can send your clients contacts directly to SendInBlue and subscribe them to your newsletter or SMS campaign using our API integration.

* Note: your hosting must support PHP to make this integration.

All you need to do is:

Go to the https://account.sendinblue.com/advanced/api and get an API key for API v3:
Go to the "Contacts" tab: https://my.sendinblue.com/users/list.
Then choose the list where your subscribers will be added to, click to "All Contacts" dropdown menu. You'll see all of your lists. The ID of the list is a number in [...] before the list name. In our example, we've got lists with ID=2 and ID=3.
Put your API key and list ID to your form-handler.php file in the root of your exported archive:

$sendInBlueAPIkey = 'PUT_YOUR_API_KEY_HERE';

$sendInBlueListIDs = array(2,3);

As you see, you can add contacts to more than one list. Just separate lists IDs by a comma.

That's it! Now all contacts from forms will be added to the chosen list(s) in SendInBlue.

HubSpot contacts API integration

You can send your clients contacts directly to HubSpot using our API integration.

* Note: your hosting must support PHP to make this integration.

All you need to do is:

Go to the https://app.hubspot.com/l/integrations-settings/api-key and click on "Create key" button:

You'll see your API key. Copy it.
Put your API key to your form-handler.php file in the root of your exported archive:

$hubSpotAPIkey = 'PUT_YOUR_API_KEY_HERE';
By default, the user preview card in the HubSpot interface shows only 4 fields: First name, Last name, Phone, Email. Our script can send any field from your form, but they will not be visible in the user preview card until you add them to the HubSpot interface.

Here is a list of properties supported by our script:
- City
- Company Size
- Country/Region
- Email (added by default)
- First Name (added by default)
- Last Name (added by default)
- Membership notes (data from any other form field will be added to this property)
- Message
- Phone (added by default)
- Postal code (ZIP)
- Street address
To see them in the user preview card, choose any of your contacts, click on the "Preview" button; you'll see a user preview card; click on the "Actions" dropdown and choose the "View all properties" link.

You'll see the page with all available properties in the right column and all properties that will be shown in the user card (in the left column). Just choose properties you'd like to see in the user preview from the right column by clicking on the "Add to your view" button. Property should be supported by our script (check the list above).

Google ReCaptcha integration

* Note: your hosting must support PHP to make this integration.

You can protect your website forms from spam with Google ReCaptcha (captcha). Manual installation could be a bit difficult; that's why we made it for you.

To set ReCaptcha integration you need to do the following:

Open https://www.google.com/recaptcha/admin/create. You'll see "Register a new site" page.
Fill all the fields:
- Label:
  Title of your project;
- reCAPTCHA type:
  Choose "reCAPTCHA v2" -> "I'm not a robot" tickbox;
- Domains:
  Add your domain (e.g. my-website.com);
- Send alerts to owners:
  You can remove this flag to avoid receiving Google alerts to your email;
And click the "Submit" button.
You'll see the page with your "Site key" and "Secret key". Copy them.
Export your page from our Generator app and open the form-handler.php file in any code editor.
Find $gRecapchaSecret variable and put your "Secret key" as a value of this variable:

$gRecaptchaSecret = '6LcCQd8UAAAAACcneQp3SUUdQkGDOTphxVS_4Vwn';
Then, open your index.html file from the archive in any code editor and scroll to the bottom of the code. You'll see a commented block of code, titled:


Uncomment this section and replace PUT_YOUR_SITE_KEY_HERE with your Site key.
Done! Just upload an archive to your hosting, unzip it and test :)
ReCaptcha will be shown in the popup when you'll try to submit any form:

If the ReCaptcha is completed, this popup will be closed and the form will be submitted automatically. Otherwise, ReCaptcha will be refreshed. The popup can be closed at any time.

Animations

To create beautiful on scroll animations simply, we included "AOS" library in Startup.
It has lots of effects and settings.

All you need to do is add data-aos="ANIMATION_NAME" to elements that you'd like to animate.
It could be a whole block or only its title and text.
Also, you can set the data-aos-delay="XXX" parameter, where XXX is a delay of animation start in milliseconds. It can be useful to create "cascades" of animations when you want some elements to animate after another (e.g. two blocks in a row).

Check all available animations and settings on the AOS website or check the full parameters list on their GitHub repository.

A few examples:

Documentation on Startup

Getting started

Preview, Export project, create a randomized layout, delete or refresh project

Use presets

Change Fonts

Change colors

Set animations

Change Images

Full classes guide

Width and Height

Margins

Paddings

Font styling

Colors

Border radiuses

Positioning elements

Full elements guide

Buttons

Available Properties

Links

Inputs

Available Properties

Selects

Available Properties

Textareas

Available Properties

Checkboxes, Radio-buttons

Checkbox

Group of radio-buttons

Available Properties

Color filters for background images

Available Properties

Sticky Navigation

Receive data from forms

Telegram integration

Create Telegram bot, get access token

Send a message to the bot

Get Chat ID

Set Token and Chat ID in the form-handler.php

Viber integration

Create Viber bot, get access token

Set up webhook

Subscribe to your bot

MailChimp integration

SendInBlue integration

HubSpot contacts API integration

Google ReCaptcha integration

Animations

A few examples: