Seamless Cruise Data Integration with Duda Widget for Enhanced User Experience

Unified Data Integration with Duda and Custom Development

Our client requires a unified platform to ensure that a specific data type is available across multiple websites. We can use Duda and implement custom CSS and JavaScript with drag-and-drop functionality while integrating the necessary HTML to achieve this. We also make different widgets in Duda and then use them with the authentication on our website. We fetch data from the APIs and have different filters.

• Authentication
• Widgets
• Drag and drop Support
• Use Custom HTML, CSS, and JS
• Fetch data from APIs

Problem Learning

First, we need to implement authentication by generating a unique key for website users, which will be used to verify their access on the Duda platform. This user key will allow them to utilise specific widgets. We will integrate custom JavaScript from our website into Duda to enable this functionality. Once authentication is in place, we will add CSS and JavaScript to fetch data from third-party APIs. The retrieved data can then be seamlessly used across multiple websites.

Fetch Data from a third-party API

After creating different widgets, we developed custom JavaScript to fetch data from third-party APIs. This ensures seamless data integration, allowing widgets to display relevant information dynamically.

Create JS and CSS

For different websites, the client wants all data to be displayed dynamically. To achieve this, we fetch data from a third-party API and update the website content in real time. However, we face CSS conflicts because Duda has its styling, and our custom CSS sometimes overrides or clashes with it.

Overcoming Challenges

Dynamic Data Integration

Ensured real-time data fetching from third-party APIs. Implemented proper error handling to manage API failures. Used asynchronous JavaScript (async/await) for smooth data updates. Duda only supports HTML, CSS & JS.

User Authentication & Access Control

Implemented unique user keys for authentication. Restricted access to widgets based on user permissions. Ensured security measures to protect user data.

Widget Customization for Different Websites

Developed modular widgets that can be customized per website. Allowed clients to add/remove widgets dynamically. Ensured widgets remain optimized. Provided also provides customization for the font type, font color, button color, and text color.

How We Solve the Problem

Resolving CSS Conflicts with Duda

Used unique and specific class names to prevent style overrides. Applied scoped CSS and inline styles where necessary. Used! important, selectively for critical styling fixes.

Implementing Dynamic Data Integration

Developed custom JavaScript to fetch and display API data dynamically. Used async/await with proper error handling to ensure seamless data retrieval. Implemented caching mechanisms to reduce redundant API calls and improve performance.

Customizing Widgets for Different Clients

Designed modular widgets that can be enabled/disabled based on user preferences. Allowed clients to configure widgets dynamically without modifying the core code. Ensured widgets remain optimized for performance.

Optimizing Performance & Load Time

Reduced API call frequency and implemented efficient data handling. Optimized JavaScript execution to prevent blocking UI interactions. Used lazy loading for widgets to improve website speed.

Duda Widget Implementation Example

Widgets

Preview of the website

Scalability and Performance Best Practices

Efficient API Calls

Use caching mechanisms to store frequently accessed data. Implement rate limiting to prevent excessive API requests. Optimize API responses by requesting only necessary data fields.

Optimized CSS and JS

Use async/await for non-blocking data fetching. Avoid excessive use of !important to maintain proper styling. Use scoped CSS to prevent conflicts with Duda’s default styles.