Purpose
In this guide we'll cover how to integrate CodexFit with your website.
Please note, this is a basic integration allowing you to add things like register, login or a bundles component to a page.
Advanced level customisation is possible but not the focus of this guide.
CodexFit Components
CodexFit is integrated using components. Think of these sort of like an iFrame where we inject certain content from CodexFit in your website. The biggest difference is that while the components will look good when they're just added to the page, they are much more flexible because you can style these using CSS, too.
Each component serves a purpose.
For example, the registration component can be put on a page to then register customers.
We include the following components. Generally, we recommend adding one component per page. If you are not utilising our on-demand/live streaming integration, you can ignore the 2nd part of the list.
Standard component list
- Login
- Register
- Forgot Password
- Reset Password
- Bundles
- Plans
- Timetable
- Event booking
- Instructors (listing of all instructors)
- Instructor (an individual instructor)
- Account (made up of further individual components for additional customisation)
- Pop-out cart/checkout
- Waitlist confirmation
- SCA confirmation (required in Europe and/or countries where strong customer authentication is required)
On-demand/live streaming components
- Video collections (a listing of all video collections
- Video collection (shows all videos within a collection)
- Videos
Documentation for each component can be found here. Please note, the documentation is primarily intended for advanced level integrations where you may want your developer to show/hide things on certain components or change the layout of the standard integration components.
Styling
By default, all of our components have standard formatting. However, using CSS you can change things like colours and fonts. In the future, CodexFit will allow you to set a standard set of colours in the CodexFit dashboard so you could simply add a single line of code to the header of your site and an individual component per page.
You can experiment with styling by using a demo we have setup in JSFiddle here.
Integration
Add the following line of code to the <header> of your site. Paste it immediately after the <header> tag.
<script src="https://demo.codexfit.com/autoconfigure.js" type="text/javascript"></script>
Replace demo.codexfit.com with your CodexFit URL, if applicable.
Then, create a new page for each component and add the component name to the page body. For example, if you were adding login to a page, add this code to the body:
<div id="codex-app">
<codex-login></codex-login>
<codex-logout></codex-logout>
</div>
Using JSFiddle linked above, you can override the default CSS. You can do this by adding CSS to the site. All base styles are defined here.