Widget Installation Guide
1. Complete widget settings in your iTransfers account
Before installing the widget, make sure you have filled in all required fields in your widget settings:
Domain name
Client
Supplier for quotation
Booking type
Sidebar settings
If the widget does not work correctly after installation, double-check that you entered the correct domain name and saved your widget settings.
2. Add code to your website
Step 2.1 — Include styles and scripts
Insert the following lines into the section of the website page where you want to display the widget:
Command line
1
<link rel="stylesheet" href="/booking/assets/widget.css" />2
<script type="module" app="/booking/assets/widget.js" defer></script>
Step 2.2 — Add widget container
Place the following element exactly where you want the widget to appear on your page:
Command line
1
<div id="app" data-page='{"component":"Widget/WidgetForm","url":""}'></div>
3. Update your Nginx configuration
Add this block inside your server block in your Nginx config file:
Command line
1
location /booking/ {2
proxy_pass https://itransfers.com;3
proxy_ssl_server_name on;4
proxy_set_header Host itransfers.com;5
proxy_set_header X-Real-IP $remote_addr;6
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;7
proxy_set_header X-Forwarded-Host $host;8
proxy_set_header X-Forwarded-Proto $scheme;9
proxy_cookie_domain itransfers.com $host;10
}
4. Reload Nginx
Run the following command to test the configuration and reload Nginx:
Command line
1
sudo nginx -t && sudo systemctl reload nginx
5. Verify widget functionality
Once you've completed these steps, visit the page on your website where you installed the widget and check that it displays and works as expected.
FAQ (Frequently Asked Questions)
Q: What if the widget doesn’t appear after installation?
A: Make sure you saved all required fields in your iTransfers widget settings and correctly inserted both the <head> code and the <div> container on your page.
Q: What should I do if my website uses caching or a CDN?
A: Clear your site’s cache and purge CDN cache after adding the widget code so changes take effect immediately.
Q: Can I change the widget location later?
A: Yes. You can move the <div id="app"> element to any section on your page to change its position.
Need help?
If you have any issues during or after installation, please contact us at [email protected]