Integrating ShowClix with Wix Using Velo: A Step-by-Step Guide

Integrating ShowClix into your Wix website via Velo can greatly improve your event management and create a seamless user experience. In this guide, I will walk you through the steps of integrating ShowClix with Wix using Velo. We will cover obtaining a token for authentication, adding events through the ShowClix API, and fetching related events.

Step 1: Setup ShowClix Account and Wix Website with Velo

Ensure that you have an active ShowClix account and a Wix website. Then, log in to your Wix account and enable Velo development mode by clicking on ‘Dev Mode’ and then 'Turn on Dev Mode'.

Step 2: Obtain the Token from ShowClix

You’ll need a token to authenticate your requests to ShowClix API. Let’s create a backend module to get the token.

1. In your Wix editor with Velo enabled, go to ‘Site Structure’ on the left panel.

2. Under ‘Backend’, right-click and select ‘New Web Module’ and name it showclix.js.

3. Use the code snippet below to fetch the token.

import {fetch} from'wix-fetch';  

export function getShowClixToken() {     
    const apiUrl = 'https://www.showclix.com/oauth/authorize';     
    const username = 'YOUR_USERNAME';     
    const password = 'YOUR_PASSWORD';      
    
return fetch(apiUrl, {         
    method: 'POST',        
    headers: {                     
        'Content-Type': 'application/json'         
    },         
    body: JSON.stringify({ username, password })     
    }).then(response => response.json()); 
}
    

Replace YOUR_USERNAME and YOUR_PASSWORD with your ShowClix credentials.

Step 3: Adding Events using the Token

Now, let’s create a function in the showclix.js module to add events using the token obtained in step 2.

exportfunctionaddEvent(token, eventData) {     
const apiUrl = 'https://www.showclix.com/rest.api/Event/';   
      
return fetch(apiUrl, {         
  method: 'POST',         
  headers: {             
    'Authorization': `Bearer ${token}`,             
    'Content-Type': 'application/json'         
    },         
   body: JSON.stringify(eventData)     
 }).then(response => response.json()); 
}
 

You need to pass the token and the event data as parameters when calling this function.

Step 4: Fetching Related Events

To fetch all related events for a specific event, you can use the following function in the showclix.js module.

export function getRelatedEvents(token, eventId) {   
  
const apiUrl = `https://www.showclix.com/rest.api/Event/${eventId}/child_events`;          
  
return fetch(apiUrl, {         
    method: 'GET',         
    headers: {             
      'Authorization': `Bearer ${token}`         }     
  }).then(response => response.json()); 
}
  

Again, you need to pass the token and the event ID as parameters.

Step 5: Utilize Functions in Front-end

In your front-end, you can now use these functions to add events and fetch related events.

import {getShowClixToken, addEvent, getRelatedEvents} from'backend/showclix';  

$w.onReady(asyncfunction () {     
const tokenData = awaitgetShowClixToken();     
const token = tokenData.access_token; 

// Example of adding an event 

const newEvent = {         

        // ...event data...     

};     

await addEvent(token, newEvent);      // Example of fetching related events 

const eventId = '12345'; // Replace with your event ID
const relatedEvents = await getRelatedEvents(token, eventId);     console.log(relatedEvents); 

});

Step 6: Customize, Test, and Publish

Finally, make sure to customize your front-end to display the events. Test thoroughly to ensure that everything is working as expected. Once you’re satisfied, publish your site.

Conclusion

By following these steps, you should now have successfully integrated ShowClix with your Wix website using Velo. This integration enables you to efficiently manage your events directly from your site and provide a seamless experience for your users.

Need Professional Assistance?

If you find that you need additional support or professional assistance in integrating ShowClix with your Wix website, don't hesitate to reach out to CodeMasters. Codemasters is a team of web development experts who can help streamline the process and ensure that your integration is seamless and functional. Whether you need help with the integration itself or advice on optimizing your site for events, Codemasters can provide the expertise and support necessary to enhance your website. Don’t let technical hurdles hold you back; let the professionals handle the complexities so you can focus on delivering an excellent experience for your audience.