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
- Go to your project's "Settings"
- Find the "Scripts" section
- Add your payment processor's script code to the header or body section
- 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
- Create an account with Razorpay
- Add the Razorpay script to your site via the Scripts section
- Configure your checkout buttons with the appropriate Razorpay handlers
- 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:
- Set up proper SPF, DKIM, and DMARC records for your domain
- Use a reliable email delivery service via API integration
- 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:
- Create your email template HTML
- Add it to your site via the Scripts section or form handling configuration
- 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:
- Use the appropriate webhook or API from your CRM system
- Add the integration code via the Scripts section
- 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:
- Go to project Settings
- Find the "Scripts" section
- Add scripts to either:
- Header section (for analytics, tracking codes, etc.)
- Body section (for widgets, forms, etc.)
- Save your changes
Embedding iFrames
You can embed iFrames for third-party content:
- Go to the Edit mode for your page
- Select where you want to add the iframe
- Use the AI Edit feature with a prompt like "Add an iframe with the following code: [your iframe code]"
- Alternatively, use the Code editor to add iframe elements directly
API Integration
For more advanced functionality, you can integrate external APIs:
- Use the Code editor to add API calls via JavaScript
- Configure API endpoints and authentication
- 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.