E-commerce & Integrations

Understanding E-commerce Capabilities

Rollout can create professional-looking e-commerce website designs, but it's important to understand that Rollout currently focuses primarily on generating frontend UI. For full e-commerce functionality, you'll need to implement backend integrations.

Current E-commerce Capabilities

Rollout can generate:

• Product catalog layouts
• Product detail pages
• Shopping cart UI
• Checkout page designs
• Order summary pages

However, for these components to be fully functional, you'll need to integrate them with:

• Payment processing systems
• Inventory management
• Order processing
• Customer accounts

Payment Processing Integration

To add payment functionality to your Rollout-generated e-commerce site:

Using Script Integration

1. Go to your project's "Settings"
2. Find the "Scripts" section
3. Add your payment processor's script code to the header or body section
4. Configure the payment buttons to work with these scripts

Common Payment Gateway Integrations

You can integrate services like:

• PayPal
• Stripe
• Razorpay
• Square

Example: Basic Razorpay Integration

1. Create an account with Razorpay
2. Add the Razorpay script to your site via the Scripts section
3. Configure your checkout buttons with the appropriate Razorpay handlers
4. Test the payment flow

For detailed implementation examples, check out tutorial videos on the Rollout website.

Form & Contact Functionality

Email Delivery Setup

To ensure emails from contact forms don't end up in spam:

1. Set up proper SPF, DKIM, and DMARC records for your domain
2. Use a reliable email delivery service via API integration
3. Configure forms to send through authenticated SMTP servers

Custom Email Templates

Yes, you can customize the HTML formatting of emails sent from your contact forms:

1. Create your email template HTML
2. Add it to your site via the Scripts section or form handling configuration
3. Test to ensure proper formatting and delivery

Third-Party Integrations

Rollout supports a wide range of third-party integrations through script embedding:

Analytics Tools

• Google Analytics
• Facebook Pixel
• Hotjar

Booking Systems

• Trafft
• Calendly
• Other booking widgets

Chat & Support

• Live chat modules
• Chatbots
• Support ticket systems

CRM Integration

To connect forms to CRM systems:

1. Use the appropriate webhook or API from your CRM system
2. Add the integration code via the Scripts section
3. Configure your forms to send data to the CRM

Forms & Surveys

• Google Forms
• Typeform
• JotForm

Adding Custom Code & Scripts

To add any custom code or third-party scripts:

1. Go to project Settings
2. Find the "Scripts" section
3. Add scripts to either:
   • Header section (for analytics, tracking codes, etc.)
   • Body section (for widgets, forms, etc.)
4. Save your changes

Embedding iFrames

You can embed iFrames for third-party content:

1. Go to the Edit mode for your page
2. Select where you want to add the iframe
3. Use the AI Edit feature with a prompt like "Add an iframe with the following code: [your iframe code]"
4. Alternatively, use the Code editor to add iframe elements directly

API Integration

For more advanced functionality, you can integrate external APIs:

1. Use the Code editor to add API calls via JavaScript
2. Configure API endpoints and authentication
3. Handle data processing and display on your site

Remember that while Rollout makes it easy to create beautiful frontends, implementing full e-commerce functionality requires appropriate backend services. The platform is continuously evolving to make these integrations simpler in future updates.